Модификация Bootstrap 3's Collapse Анимация с Animate.css

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