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", I.E. 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?

It is indeed still non-functional. I edited the question to reflect the current HTML. — awimley, Aug 31 '15 at 15:42
No, none in the browser console, none from third party html parsers, none on the server side. What developer tools do people normally use for CSS? I'm only really familiar with the tools required to debug javascript. — awimley, Aug 31 '15 at 15:54

score 0 · Answer 1 · edited Jul 18 '17 at 01:01

0

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

edited Jul 18 '17 at 01:01

Pang

9,564
146
81
122

answered Jul 17 '17 at 09:39

Vijay Patil

31
1
4

score 0 · Answer 2 · answered Nov 24 '17 at 15:12

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.

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

2 Answers2