使用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; 
}