If you take a look at the bootstraps fade class used with the modal window you will find, that all it does, is to set the opacity value to 0 and adds a transition for the opacity rule. Whenever you launch a modal the in class is added and will change the opacity to a value of 1 . Knowing that you can easily build your own fade-scale class. Here is an example.
@import url("https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css");
.fade-scale {
transform: scale(0);
opacity: 0;
-webkit-transition: all .25s linear;
-o-transition: all .25s linear;
transition: all .25s linear;
}
.fade-scale.in {
opacity: 1;
transform: scale(1);
}
This answer is getting more up votes lately so i figured i add an update to show how easy it is to customize the BS modal in and out animations with the help of the great Animate.css library by
Daniel Eden*.
All that needs to be done is to include the stylesheet to your <head></head> section. Now you simply need to add the animated class, plus one of the entrance classes of the library to the modal element.
But there is also a way to add an out animation to the modal window and since the library has a bunch of cool animations that will make an element disappear, why not use them. :) To use them you will need to toggle the classes on the modal element, so it is actually better to call the modal window via JavaScript, which is described here. You will also need to listen for some of the modal events to know when it's time to add or remove the classes from the modal element. The events being fired are described here. To trigger a custom out animation you can't use the data-dismiss="modal" attribute on a button inside the modal window that's suppose to close the modal. You can simply add your own attribute like data-custom-dismiss="modal" and use that to call the $('selector').modal.('hide') method on it. Here is an example that shows all the different possibilities.
/* -------------------------------------------------------
| This first part can be ignored, it is just getting
| all the different entrance and exit classes of the
| animate-config.json file from the github repo.
--------------------------------------------------------- */
var animCssConfURL = 'https://api.github.com/repos/daneden/animate.css/contents/animate-config.json';
var selectIn = $('#animation-in-types');
var selectOut = $('#animation-out-types');
var getAnimCSSConfig = function ( url ) { return $.ajax( { url: url, type: 'get', dataType: 'json' } ) };
var decode = function ( data ) {
var bin = Uint8Array.from( atob( data['content'] ), function( char ) { return char.charCodeAt( 0 ) } );
var bin2Str = String.fromCharCode.apply( null, bin );
return JSON.parse( bin2Str )
}
var buildSelect = function ( which, name, animGrp ) {
var grp = $('<optgroup></optgroup>');
grp.attr('label', name);
$.each(animGrp, function ( idx, animType ) {
var opt = $('<option></option>')
opt.attr('value', idx)
opt.text(idx)
grp.append(opt);
})
which.append(grp)
}
getAnimCSSConfig( animCssConfURL )
.done (function ( data ) {
var animCssConf = decode ( data );
$.each(animCssConf, function(name, animGrp) {
if ( /_entrances/.test(name) ) {
buildSelect(selectIn, name, animGrp);
}
if ( /_exits/.test(name) ) {
buildSelect(selectOut, name, animGrp);
}
})
})
/* -------------------------------------------------------
| Here is were the fun begins.
--------------------------------------------------------- */
var modalBtn = $('button');
var modal = $('#myModal');
var animInClass = "";
var animOutClass = "";
modalBtn.on('click', function() {
animInClass = selectIn.find('option:selected').val();
animOutClass = selectOut.find('option:selected').val();
if ( animInClass == '' || animOutClass == '' ) {
alert("Please select an in and out animation type.");
} else {
modal.addClass(animInClass);
modal.modal({backdrop: false});
}
})
modal.on('show.bs.modal', function () {
var closeModalBtns = modal.find('button[data-custom-dismiss="modal"]');
closeModalBtns.one('click', function() {
modal.on('webkitAnimationEnd oanimationend msAnimationEnd animationend', function( evt ) {
modal.modal('hide')
});
modal.removeClass(animInClass).addClass(animOutClass);
})
})
modal.on('hidden.bs.modal', function ( evt ) {
var closeModalBtns = modal.find('button[data-custom-dismiss="modal"]');
modal.removeClass(animOutClass)
modal.off('webkitAnimationEnd oanimationend msAnimationEnd animationend')
closeModalBtns.off('click')
})
<script>
$(document).ready(function () {
// BS MODAL OPEN CLOSE EFFECT ---------------------------------
var timeoutHandler = null;
$('.modal').on('hide.bs.modal', function (e) {
var anim = $('.modal-dialog').removeClass('bounceInDown').addClass('fadeOutDownBig'); // Model Come class Remove & Out effect class add
if (timeoutHandler) clearTimeout(timeoutHandler);
timeoutHandler = setTimeout(function() {
$('.modal-dialog').removeClass('fadeOutDownBig').addClass('bounceInDown'); // Model Out class Remove & Come effect class add
}, 500); // some delay for complete Animation
});
});
</script>
9条答案
按热度按时间neskvpey1#
If you take a look at the bootstraps
fadeclass used with the modal window you will find, that all it does, is to set theopacityvalue to0and adds a transition for theopacityrule.Whenever you launch a modal the
inclass is added and will change theopacityto a value of1.Knowing that you can easily build your own
fade-scaleclass.Here is an example.
-- UPDATE --
This answer is getting more up votes lately so i figured i add an update to show how easy it is to customize the BS modal in and out animations with the help of the great Animate.css library by
All that needs to be done is to include the stylesheet to your
<head></head>section. Now you simply need to add theanimatedclass, plus one of the entrance classes of the library to the modal element.But there is also a way to add an out animation to the modal window and since the library has a bunch of cool animations that will make an element disappear, why not use them. :)
To use them you will need to toggle the classes on the modal element, so it is actually better to call the modal window via JavaScript, which is described here.
You will also need to listen for some of the modal events to know when it's time to add or remove the classes from the modal element. The events being fired are described here.
To trigger a custom out animation you can't use the
data-dismiss="modal"attribute on abuttoninside the modal window that's suppose to close the modal. You can simply add your own attribute likedata-custom-dismiss="modal"and use that to call the$('selector').modal.('hide')method on it.Here is an example that shows all the different possibilities.
pvabu6sv2#
纯Bootstrap 4解决方案与CSS 3。
第一个
Full example
参考编号
lztngnrs3#
我从w3school bootstrap model复制了模型代码，并添加了以下css。这段代码提供了漂亮的动画。你可以试试。
but5z9lq4#
使用Animate.css和jquery实现模态输入输出效果非常简单，代码简短。
在HTML中：
下面这段jquery代码来自：https://codepen.io/nhembram/pen/PzyYLL
我正在修改这个以便经常使用。
jquery代码：
rta7y2nd5#
在Bootstrap 5.2版本中，只需将
.modal.fade .modal-dialog类的transform属性值更改为scale(0)或您希望的任何其他值即可。o4tp2gmn6#
ukxgm1gy7#
x33g5p2x8#
对于最新的（5.x）bootstrap，你只能使用css来控制动画。例如，这将显示“放大/缩小”效果：
z4iuyo4d9#
riot.js解决方案：
我的riot.js Example将animated-modal标记嵌套在订单配置文件标记中。
请注意，这是假设jquery和riot.js之前已加载。
动画模态标记内容：
以及要嵌套的配置文件标记：
配置文件标记内容：