使用Animate.css修改Bootstrap 3的折叠动画

Question

我设法覆盖默认＆＃34;崩溃＆＃34; Bootstrap 3的崩溃插件动画，但无法覆盖切换回动画。

基本上我希望它淡入（现在正在做）并在关闭时淡出，此时它默认为该事件的默认BS动画。

示例jsfiddle

<div class="collapse animated fadeIn" id="collapseExample">
  <div class="well">
    ...
  </div>
</div>

Answer 1

在看了Bootstrap 3 documentation for "collapse"和This other question之后，我接管了这些事件，并设法让它发挥作用。

1. 我从element中删除了所有animate.css类。
2. jQuery覆盖显示和隐藏BS生成的事件。
3. 创建一个可以延迟“隐藏”转换的类。

结果jsfiddle

JS

$(function() {
var animateIn = 'animated fadeIn';
var animateOut = 'animated fadeOut collapsing-delay';

$('#collapseExample').on('show.bs.collapse', function () {
    // do something…
    $(this).addClass(animateIn).on('shown.bs.collapse',                            
    function() {                                                   
        $(this).removeClass(animateIn);
    });
})

$('#collapseExample').on('hide.bs.collapse', function () {
    // do something…
    $(this).addClass(animateOut).on('hidden.bs.collapse',
    function() {
        $(this).removeClass(animateOut);
    });
})

})

CSS

.collapsing-delay {
    /* delay BS transition for animated fadeOut to show */
    -webkit-transition-delay: 2s !important;
    transition-delay: 2s !important;
}