Javascript css3 animation.css不使用自定义模式

我试图创建我自己的完整页面模式，我在这方面取得了成功，但现在我想添加一个动画到它。。。我使用来完成此任务，但仅当添加zoomIn或zoomOut动画类时，动画才不起作用

这是我试过的。。。任何帮助都将被感激

我的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>

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


});

您需要添加“动画”类

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

您需要添加“动画”类

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

---

当您将zoomIn类添加到模式中时，是否确实要添加

动画类？这在您提供的JSFIDEL上起作用：

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


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

让我知道这是否适用于您。
当您将zoomIn类添加到模式中时，是否确实要添加
动画类？这在您提供的JSFIDEL上起作用：

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


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

让我知道这对你是否有用。
谢谢，伙计，我忘了只添加那个了，伙计，我忘了只添加那个了
<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>