Twitter bootstrap 3 修改引导程序3'；s使用Animate.css折叠动画

我设法为Bootstrap3的折叠插件覆盖默认的“折叠”动画，但无法覆盖切换回动画

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

范例

...

在查看和之后，我接管了事件并设法使其正常工作

我从元素中删除了所有animate.css类

jQuery覆盖由BS生成的显示和隐藏事件

创建一个类，该类将延迟“隐藏”上的转换

结果

JS

CSS

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

$(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);
    });
})

})

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