基于Bootstrap和animate.css的模态框动画效果
最近在网上看到了可以对Bootstrap模态框增加打开和关闭的动画效果,故记录一下。原文地址点这里
此动画效果需要引入animate.css,可以在animate.css官方网址中点击下载animate.css. 这篇文章和这篇有对animate的简介。
将如下代码放入JS文件全局引入:
//animate.css动画触动一次方法
$.fn.extend({animateCss: function (animationName) {var animationEnd = 'webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend';this.addClass('animated ' + animationName).one(animationEnd, function() {$(this).removeClass('animated ' + animationName);});}});
/*** 显示模态框方法* @param targetModel 模态框选择器,jquery选择器* @param animateName 弹出动作* @ callback 回调方法*/
var modalShow = function(targetModel, animateName, callback){var animationIn = ["bounceIn","bounceInDown","bounceInLeft","bounceInRight","bounceInUp","fadeIn", "fadeInDown", "fadeInLeft", "fadeInRight", "fadeOutUp","fadeInDownBig", "fadeInLeftBig", "fadeOutRightBig", "fadeOutUpBig","flipInX","flipInY","lightSpeedIn","rotateIn","rotateInDownLeft","rotateInDownRight","rotateInUpLeft","rotateInUpRight","zoomIn","zoomInDown","zoomInLeft","zoomInRight","zoomInUp","slideInDown","slideInLeft","slideInRight", "slideInUp","rollIn"];if(!animateName || animationIn.indexOf(animateName)==-1){console.log(animationIn.length);var intRandom = Math.floor(Math.random()*animationIn.length);animateName = animationIn[intRandom];}console.log(targetModel + " " + animateName);$(targetModel).show().animateCss(animateName);//callback.apply(this);
}
/*** 隐藏模态框方法* @param targetModel 模态框选择器,jquery选择器* @param animateName 隐藏动作* @ callback 回调方法*/
var modalHide = function(targetModel, animateName, callback){var animationOut = ["bounceOut","bounceOutDown","bounceOutLeft","bounceOutRight","bounceOutUp","fadeOut", "fadeOutDown", "fadeOutLeft", "fadeOutRight", "fadeOutUp","fadeOutDownBig", "fadeOutLeftBig", "fadeOutRightBig", "fadeOutUpBig","flipOutX","flipOutY","lightSpeedOut","rotateOut","rotateOutDownLeft","rotateOutDownRight","rotateOutUpLeft","rotateOutUpRight","zoomOut","zoomOutDown","zoomOutLeft","zoomOutRight","zoomOutUp","zoomOut","zoomOutDown","zoomOutLeft","zoomOutRight","zoomOutUp","slideOutDown","slideOutLeft","slideOutRight", "slideOutUp","rollOut"];if(!animateName || animationOut.indexOf(animateName)==-1){console.log(animationOut.length);var intRandom = Math.floor(Math.random()*animationOut.length);animateName = animationOut[intRandom];}$(targetModel).children().click(function (e) {e.stopPropagation()});$(targetModel).animateCss(animateName);$(targetModel).delay(900).hide(1,function(){$(this).removeClass('animated ' + animateName);});//callback.apply(this);
}
var modalDataInit = function(info){//alert(info);//填充数据,对弹出模态框数据样式初始化或修改
}
以下是HTML代码:
<button type="button" class="btn btn-primary test-btn" onclick="modalShow('#bigModal', '', modalDataInit('test'));">模态框测试
</button>
<div class="modal bs-example-modal-lg" onclick="modalHide('#bigModal', '');"
id="bigModal"><div class="modal-dialog modal-lg"><div class="modal-content"><div class="modal-header"><button type="button" onclick="modalHide('#bigModal', '');" class="close"data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button><h4 class="modal-title">模态框标题</h4></div><div class="modal-body"></div></div></div>
</div>
在刚开始或刷新页面时,点击对话框会自动隐藏,添加以下代码可以解决问题:
$(function(){$('#bigModal').children().click(function(e){e.stopPropagation()});
});
每次打开和关闭模态框时会随机选择一个动画效果,也可以自己代码里写死效果,棒!
基于Bootstrap和animate.css的模态框动画效果相关推荐
- 解决Animate.css在谷歌浏览器没有动画效果
认真写好每一篇,愉悦自己,也方便他人 真正官网地址:animate.css 百度好几个排第一的都不是官网 4.0版本后需要添加前缀animate__其它照旧 3.0版本演示文档传送门 win + R ...
- 使用wow.js和animate.css实现页面滚动动画效果
wow.js是一款结合了Animate.css,可以在页面向下滚动时,为页面中的元素加载动画的js. 项目地址:GitHub - graingert/WOW: Reveal CSS animation ...
- Bootstrap从入门到实战---模态框
Bootstrap从入门到实战-模态框 <!DOCTYPE html> <html lang="en"> <head><meta char ...
- [css] 使用css实现气泡框的效果
[css] 使用css实现气泡框的效果 <!DOCTYPE html> <html lang="en"><head> <meta char ...
- 八十四、搜索框动画效果实现,React-Redux 进行应用数据的管理
2020/11/21. 周六.今天又是奋斗的一天. @Author:Runsen 上次完成了Header布局如下,这次需要实现动画效果. 搜索框动画效果实现 React-transition-grou ...
- 基于jquery fly插件实现加入购物车抛物线动画效果
在购物网站中,加入购物车的功能是必须的功能,有的网站在用户点击加入购物车按钮时,就会出现该商品从点击出以抛物线的动画相似加入购物车,这个功能看起来非常炫,对用户体验也有一定的提高.下面介绍基于jque ...
- uniapp小程序实现录音 uniapp小程序长按录音 点击播放等功能(CSS实现语音音阶动画效果)
最近项目使用uniapp开发微信小程序,需要实现一个长按时进行语音录制,限制录制时间最大为60秒,录制完成后,可点击播放,播放时再次点击停止播放,录制完成长按实现删除功能,删除后又可重新录制(如上图所 ...
- 纯html+css炫酷地球仪动画效果
纯html+css炫酷地球仪动画效果 <!DOCTYPE html> <html lang="en"> <head><meta chars ...
- 纯CSS实现3D正方体动画效果
目录 前言 正文 1.基本架构 2.书写每个div样式 3.为需要产生动画的一面单独设置样式 4.设置鼠标hover效果 5.优化 总结 前言 纯CSS实现3D正方体动画效果,此方法是通过transf ...
最新文章
- 深度优先搜索找迷宫的出路
- android调试神器Stetho
- 新工具上线!只需2步助你轻松学爬虫!
- mysql 事物状态有几种_10分钟梳理MySQL核心知识点
- 华为防火墙查看日志命令_华为防火墙异常日志,请高手进来查看,跪谢
- 作者:郭旦怀(1973-),男,博士,中国科学院计算机网络信息中心副研究员、硕士生导师。...
- python语言是非开源语言_python是非开源语言吗
- vscode eslint插件对vue文件无效
- Android+按键精灵代码,安卓按键精灵怎么编写脚本 编写脚本教程
- 产品经理必须要知道的6大人性
- 基于深度学习的命名实体识别与关系抽取
- hdu 5442 (后缀数组)
- java求三角形周长面积及重心外心内心
- vue实现前端搜索功能
- 赛迪网:VMware访谈实录
- IjkPlayer Option配置不当、导致视频卡顿或没有部分视频无声的坑;
- Python 之嵌套列表
- AD封装与原件的一一对应(+封装管理器的使用)
- 计算机流水线生产管理知识,生产流水线管理应注意的六个方面
- ecshop初次安装问题
热门文章
- 直播的学习与使用-----采集
- [性能测试] LoadRunner结果分析 – TPS
- 分布式交换机配置备份和还原
- 人生中最【无用】的二十件事
- 动态调用动态库方法 .so
- Oracle SQL语句执行步骤
- char与varchar区别(MYISAM)
- Ghost安装之后,键盘出现字符出现乱码
- DNN(DotNetNuke)注册用户终于突破10万人了,其3.0也终于跳票了...
- python commands_Windows环境下使用python的commands.getstatusoutput