Bootstrap 3 Collapse / Animate.css

by Fernando Seminario

HTML

<script src="http://daneden.github.io/animate.css/"></script>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/animate.css/3.2.6/animate.min.css">
<a class="btn btn-primary" data-toggle="collapse" href="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
  Link with href
</a>

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

CSS

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

JavaScript

$(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…
        console.log("hide triggered");
        $(this).addClass(animateOut).on('hidden.bs.collapse',
        function() {
            console.log("hidden triggered");
            $(this).removeClass(animateOut);
        });
    })
    
})