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

Question

我设法覆盖了 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. 我从元素中删除了所有 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;
}