Modifying Bootstrap 3's Collapse Animation with Animate.css

Question

I managed to override the default "collapse in" animation for Bootstrap 3's collapse plugin but unable override the toggle back animation.

Basically I want it to fade in (which is doing now) and fade out on close which at the moment its defaulting to the default BS animation for that event.

Example jsfiddle

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

Answer 1

After taking a look at the Bootstrap 3 documentation for "collapse" and This other question, I took over the events and managed to get it working.

1. I removed all animate.css classes from element.
2. jQuery to override the show and hide events generated by BS.
3. Create a class that would delay the transition on "hide".

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