css3 animation.css 无法使用自定义模式

Question

我试图创建我自己的整页模态，我在这方面取得了成功，但现在我想给它添加一个动画...我正在使用 animate.css 来完成这个任务，但动画不是仅在添加 zoomIn 或 zoomOut 动画时有效 class

这是 JSFiddel 我试过的...任何帮助将不胜感激...

我的Html

<div class="am-modal" id="examples-modal">
  <a href="javascript:void(0);" class="am-colse"> Back</a>
  <div class="head">
    Trying Modal with zoonIn and out effect
  </div>

</div>
<a href="javascript:void(0)" class="am-modal-trigger" data-am-target="#examples-modal">Modal Trigger</a>

Css

.am-modal {
  display: none;
  width: 100%;
  position: absolute;
  top: 0px;
  left: 0px;
  background-color: #2c3e50;
  padding : 20px;
}
.am-modal a{
  float : float;
}
.head{  
  margin-top : 40px;
  font-size : 25px;
  color : #fff;
  text-align : center;
}

Jquery

$(document).ready(function(e) {

  resizeDiv();
  window.onresize = function(event) {
    resizeDiv();
  }

  function resizeDiv() {
    vpw = $(window).width();
    vph = $(window).height();
    $('.am-modal').css('height', vph + "px");
  }

  $('.am-modal-trigger').on('click', function() {
    var target = $(this).data('am-target');
    $(target).css('display','block');
    $(target).addClass('zoomIn');
  });

  $('.am-colse').on('click', function() {
    $(this).parent().removeClass('zoomIn').addClass('zoomOut');
    $(this).parent().css('display','none');
  });


});

Answer 1

jsfiddle 您需要添加 class "animated"

<div class="am-modal animated" id="examples-modal">

尝试具有放大和缩小效果的模态

Answer 2

当您将 zoomIn class 添加到模态框时，您确定要添加 animated class 吗？这适用于您提供的 JSFiddel：

<div class="am-modal animated zoomIn" id="examples-modal">
  <a href="javascript:void(0);" class="am-colse"> Back</a>
  <div class="head">
    Trying Modal with zoonIn and out effect
  </div>
</div>

让我知道这是否适合你。

css3 animation.css 无法使用自定义模式

css3 animation.css not working with custom modal

javascript

jquery

css

modal-dialog

animate.css