Bootstrap 4.6 模态动画与 animate.css (4.1.1)

问题描述 投票：0回答：1

我正在尝试在打开和关闭时向 Bootstrap4.6 的模态添加一些动画。我已设法在打开模式时添加 animate.css (4.1.1) 类 ZoomIn 。但是，关闭模态框时的 ZoomOut 动画不起作用。我仅从 Bootstrap 获得默认的淡入淡出动画。

我添加了类 modal-animated 来借助 Javascript 来调用模态，从而自动从模态中添加和删除动画类。我从以下地方得到了这个想法：引导模式动画使用 animate.css 打开/关闭，并修改了脚本以使用 animate__ 前缀用于以后版本的 animate.css。 我不太确定关闭模式时 ZoomOut 类不起作用的原因。也许你可以给我一些指示来解决我的问题。这可能是非常基本的东西，作为一个 javascripz 本地人，我还没有看到它。

<script>
      $('.modal.modal-animated').on('show.bs.modal', function (e) {
    $(this).find('.modal-dialog').addClass('animate__zoomIn animate__animated');
});

$('.modal.modal-animated').on('hidden.bs.modal', function (e) {
    $(this).find('.modal-dialog').removeClass('animate__zoomOut animate__animated');
});
</script>


$('.modal.modal-animated').on('show.bs.modal', function(e) {
  $(this).find('.modal-dialog').addClass('animate__zoomIn animate__animated');
});

$('.modal.modal-animated').on('hidden.bs.modal', function(e) {
  $(this).find('.modal-dialog').removeClass('animate__zoomOut animate__animated');
});
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css">

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct" crossorigin="anonymous"></script>

<!--start Modal-->
<!-- Button trigger modal -->
<button type="button" class="btn  bg-brand-standard  shadow-jw-2m  hover-shadow-3m  rounded  p-3  my-3  mx-3  flex-grow-1" data-toggle="modal" data-target="#modalA1">
                      Open modal
                  </button>

<!-- Modal -->
<div class="modal modal-animated" id="modalA1" tabindex="-1" aria-labelledby="leeruitkomstModalA1" aria-hidden="true">
  <div class="modal-dialog  modal-dialog-centered  modal-dialog-scrollable">
    <div class="modal-content  bg-white">
      <div class="modal-header">
        <h4 class="modal-title" id="leeruitkomstModalA1">Modal title</h4>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                 <span aria-hidden="true">&times;</span>
                              </button>
      </div>
      <div class="modal-body">
        <p>Ut feugiat nunc et pharetra posuere. Etiam ullamcorper ultrices purus non tristique. Suspendisse quam magna, ultrices ut diam vitae, ultrices rutrum augue. Cras volutpat eros nibh, ultrices bibendum felis pharetra vitae.</p>


        <!--start list-->
        <ul class="list-brand">
          <li>Sit exercitation non ad enim et ut culpa elit duis sunt tempor culpa labore.</li>
          <li>Proident deserunt quis anim do commodo commodo magna elit quis amet minim quis.</li>
          <li>Reprehenderit ullamco commodo culpa labore.</li>
          <li>Occaecat qui fugiat laborum consequat.</li>
        </ul>
        <!--end list-->
        <p>Fusce eu risus quis mauris molestie dapibus ac et massa. Nulla cursus auctor neque, nec pellentesque tellus volutpat eu. Sed ullamcorper nunc at lorem cursus tempor. Duis et eros urna. Phasellus pharetra diam mauris, eleifend dapibus urna tincidunt
          sit amet. Etiam fermentum ligula quis odio tincidunt, ut sollicitudin mi mattis. Duis vitae convallis nibh.
        </p>
      </div>
      <!--<div class="modal-footer">
            <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
         </div>-->
    </div>
  </div>
</div>
<!-- Modal -->
<!--end Modal-->

javascript bootstrap-4 bootstrap-modal animate.css
1个回答
0
投票

如何使 Bootstrap 模态放大和缩小

此解决方案适用于 Bootstrap v4.6 和 v5.x。不需要 jQuery。

通过将 

.fade
类添加到模态来应用默认动画。这会导致模式从屏幕顶部淡入。

但是，我们可以使用 css 添加自定义动画，在本例中是为了使模态放大和缩小。请注意，我们将它与 

.fade
类结合使用。需要一些额外的 CSS 来更改默认的动画时间，即 300 毫秒。

.modal.fade.zoom:not(.show) .modal-dialog {
  -webkit-transform: scale(0);
  transform: scale(0);
}

动画.css

问题询问如何将 animate.css 库与 Bootstrap 模式一起使用。这不能很好地工作的原因是 Bootstrap 在关闭时将模态设置为 

display: none
。这会在动画开始之前快速隐藏模态。 Animate.css 可以正常工作，但需要额外的 css 和 JavaScript。上面的纯 CSS 解决方案实现起来要简单得多。

演示片段

.modal.fade.zoom:not(.show) .modal-dialog {
  -webkit-transform: scale(0);
  transform: scale(0);
}
<!-- This html works with both Bootstrap v4.x and v5.x -->

<button type="button" class="btn btn-outline-success m-2" data-toggle="modal" data-target="#exampleModal" data-bs-toggle="modal" data-bs-target="#exampleModal">
  Open Modal
</button>

<!-- Modal -->
<div class="modal fade zoom" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Bootstrap Modal</h5>
        <button type="button" class="close" data-dismiss="modal" data-bs-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        Adding a custom zoom animation to a Bootstrap modal.
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal" data-bs-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary"  data-dismiss="modal" data-bs-dismiss="modal">Save changes</button>
      </div>
    </div>
  </div>
</div>






<!-- Bootstrap 4.6 with jQuery -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js" ></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>


<!-- Bootstrap 5.3 without jQuery -->
<!--
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
-->

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.