使用Animate.css修改引导程序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; 
}