Animate.css 与引导模式的交互，关闭动画的问题答案

【问题标题】：Animate.css interaction with bootstrap modals, problems with close animationAnimate.css 与引导模式的交互，关闭动画的问题
【发布时间】：2015-11-25 16:40:58
【问题描述】：

我正在 MEAN 堆栈中构建一个网站。我正在使用 animate.css，虽然动画很干净，但文档并不完全清楚。说明是“只需加水”，即只需添加动画类和您想要的特定类型动画的类。我有一个模态，内置在 jquery 中，如下所示：

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

flipInX 动画和淡入淡出动画完美地结合在一起，但我似乎无法让任何关闭的动画正常工作。我尝试只添加类，并尝试通过 hide.bs.modal 和 hidden.bs.modal 事件在模态的关闭事件上添加关闭动画类，如下所示：

$("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");
  });

这不起作用。静态添加类不起作用。如何使用引导模式和 animate.css 成功合并关闭动画？

【问题讨论】：

你的第一个 div 上有两个 id=""。
O.o 谢谢，我很愚蠢。
还是不行吗？
它确实仍然不起作用。我编辑了问题以反映当前的 HTML。
你有什么错误吗？

标签： javascript jquery css twitter-bootstrap animation

【解决方案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');
})

【讨论】：

【解决方案2】：

我遇到了同样的问题，这对我有帮助：-

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

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

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

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

希望它也对你有用。

【讨论】：