基于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代码：
在刚开始或刷新页面时，点击对话框会自动隐藏，添加以下代码可以解决问题：
$(function(){
$('#bigModal').children().click(function(e){e.stopPropagation()});
});每次打开和关闭模态框时会随机选择一个动画效果，也可以自己代码里写死效果，棒！