Question

请有人可以帮助我，在启动模式打开和关闭时，动画css样式如何用于动画？当Modal打开时，它应该以fadeIn效果打开，并且在关闭时应该使用fadeOut效果。

我想使用animate.css css样式表来打开和关闭动画模式poup。它应该在打开Model时添加类fadeIn，在关闭模态时应该添加类fadeOut。（Class .fadeIn＆amp; .fadeOut来自aniamte.css样式表）

Answer 1

  $('.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

将fade添加到模态标记的class属性中：

＆＃13;

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="myModalLabel">Modal with animation</h4>
      </div>
      <div class="modal-body">
        Close modal to see <i>fade-out</i> effect.
      </div>
    </div>
  </div>
</div>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">
  Open modal with <i>fade-in</i> effect
</button>

＆＃13;

从模态标记中删除.fade类，只显示一个。有关详细信息，请参阅Remove animation部分。

Answer 3

$('#modelDivId').on('show.bs.modal', function (e) {
      $('.modal .modal-dialog').attr('class', 'modal-dialog  flipInX  animated');
})
$('#modelDivId').on('hide.bs.modal', function (e) {
      $('.modal .modal-dialog').attr('class', 'modal-dialog  flipOutX  animated');
 })

用animate.css打开/关闭bootstrap模态动画

3 个答案: