Bootstrap 模态没有动画答案

【问题标题】：Bootstrap modal is not getting animatedBootstrap 模态没有动画
【发布时间】：2020-01-07 04:21:06
【问题描述】：

当我按下打开模态窗口的按钮时，它打开的很简单，没有淡入淡出的动画效果。

我尝试向模态添加类，例如.fadeand .modal-fade，但什么也没发生。

You can see it working on my demo page. 只需按下“Jobb árat szeretnék”按钮。

<div class="modal modal-fade fade" tabindex="-1" role="dialog" id="AjanlatkeresModal" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-lg" role="dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Értesítés</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body" style="padding-bottom:0">
        <p id="cart_added_msg"></p>
        <p id="cart_not_added_msg"></p>       
      </div>
      <div class="modal-footer">
          <button type="submit" id="kerdesButton" class="btn btn-primary"><a href="<?php echo $host; ?>/ajanlatkeres" title="Tovább az ajánlatkéréshez">Tovább az ajánlatkéréshez</a></button>
          <button type="button" class="btn btn-secondary" data-dismiss="modal">Bezárás</button>
      </div>
    </div>
  </div>
</div>

【问题讨论】：

看起来不错。添加您认为动画应该如何的示例链接。
当我点击那个按钮时它淡入了。你能告诉我你使用的浏览器和浏览器的版本吗？谢谢
Chrome，版本 76.0.3809.132
复制粘贴你的代码到fiddle，工作正常
你喜欢 jquery 和 bootstrap js 文件吗？？

标签： css bootstrap-4 bootstrap-modal

【解决方案1】：

添加这个 css 并使用 modalfade 类而不是淡入淡出。这是淡入淡出动画的手动过程，希望对你有用。

.modalfade {
    animation: fadeIn 2s;
    -moz-animation: fadeIn 2s; /* Firefox */
    -webkit-animation: fadeIn 2s; /* Safari and Chrome */
    -o-animation: fadeIn 2s; /* Opera */
}
@keyframes fadeIn {
    from {
        opacity:0;
    }
    to {
        opacity:1;
    }
}
@-moz-keyframes fadeIn { /* Firefox */
    from {
        opacity:0;
    }
    to {
        opacity:1;
    }
}
@-webkit-keyframes fadeIn { /* Safari and Chrome */
    from {
        opacity:0;
    }
    to {
        opacity:1;
    }
}
@-o-keyframes fadeIn { /* Opera */
    from {
        opacity:0;
    }
    to {
        opacity: 1;
    }
}

【讨论】：