javascript - Bootstrap : animation in modal window

Question

我想像这样在 Bootstrap 的模态窗口中使用 wow.js 动画(带有 animate.css)

<div id="myModal" class="modal fade" role="dialog">
  <div class="modal-dialog">

    <!-- Modal content-->
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <h4 class="modal-title">Modal Header</h4>
      </div>
      <div class="modal-body">
          <div class="container">
             <div class="row">
                <div class="col-md-6 col-sm-6 col-xs-12 wow fadeInLeft">
                   <p>Animation from Right</p>
                </div>
                <div class="col-md-6 col-sm-6 col-xs-12 wow fadeInRight">
                   <p>Animation from Right</p>
                </div>
             </div> 
          </div>
      </div>

    </div>

  </div>
</div> 

我包括 wow.js、animate.css，动画在页面中正常工作，但在模态窗口中它不起作用，需要您的帮助

Answer 1

它不起作用，因为当您调用 wow.init() 时，灯箱元素尚不存在。

您需要在元素创建后(即打开时)调用 wow.init() 或 wow.sync() 以便 wow查找元素的代码。

Bootstrap 可以在创建和显示模式时运行回调。你最终会看起来像这样

$('#myModal').on('shown.bs.modal', function () {
  wow.sync()
})