Animate.css interaction with bootstrap modals, problems with close animation

Question

I'm building a website in the MEAN stack. I am using animate.css, and though the animations are clean the documentation is not entirely clear. The instructions are "just add water", IE just add the animated class and the class of the particular type of animation you want. I have a modal, built in jquery as follows:

var listModal = '<!-- Modal -->'+
    '<div id="testModal'+ v.id +'" class="testModal modal animated flipInX fade" tabindex="-1" role="dialog" aria-labelledby="'+ v.id +'-label" aria-hidden="true">'+
    '<div class="modal-backdrop fade"></div>'+
      '<div class="modal-dialog modal-lg">'+
        '<div class="modal-content">'+
          '<div class="modal-header testModalBar">'+
            '<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>'+
            '<h4 class="test4 modal-title" id="'+ v.id +'-label"> '+ v.client +'</h4>'+
          '</div>'+
          '<div class="modal-body">'+
            '<h3 class="test3">'+ v.title +'</h3>'+
            '<div class="row">'+
              '<div class="col-md-6">'+
                '<h5 class="test"> Challenge: </h5>'+
                '<p id="challengeText">'+ v.challenge +'</p>'+
                '<h5 class="test"> Solution: </h5>'+
                '<p id="challengeText">'+ v.solution +'</p>'+
                '<h5 class="test"> Return: </h5>'+
                '<p id="challengeText">'+ v.ret +'</p>'+
              '</div>'+
              '<div class="col-md-6">'+
                '<img src="/images/'+ v.img +'" alt="">'+
              '</div>'+
            '</div>'+
          '</div>'+
          '<div class="modal-footer">'+
            '<button id="testBtn'+ v.id +'" type="button" class="btn btn-sm btn-default" data-dismiss="modal">Close</button>'+
          '</div>'+
        '</div>'+
      '</div>'+
    '</div>'+
    '<!-- Modal end -->';

the flipInX animation and the fade animation work beautifully well together, but I can't seem to get any close animations working. I've tried just adding the class, and I've tried adding the close animation classes on the modal's close event through the hide.bs.modal and hidden.bs.modal events like so:

$("testModal" + v.id).on("hide.bs.modal", function (e) {
    $("#testModal" + v.id).addClass("flipOutY");
  });

  $("testModal" + v.id).on("hidden.bs.modal", function (e) {
    $("#testModal" + v.id).removeClass("flipOutY");
  });

This does not work. Adding the classes statically does not work. How do I successfully incorporate closing animations using bootstrap modals and animate.css?

Answer 1

bootstrap modal animation open/close with animate.css

$('.modal').on('show.bs.modal', function (e) {
   $('.modal .modal-dialog').attr('class', 'modal-dialog  fadeIn  animated');
})
$('.modal').on('hide.bs.modal', function (e) {
   $('.modal .modal-dialog').attr('class', 'modal-dialog  fadeOut  animated');
})

Answer 2

I had the same exact problem and this helped me :-

$(".modal .close").click( function() {

     if ($($this).hasClass('flipInY'))
         $($this).removeClass('flipInY');

     $($this).addClass('flipOutY'); 

     setTimeout( function(){
             $($this).modal('hide');
     }, 500);
});

Hope it will work for you too.