Bootstrap：模态窗口中的动画答案

【问题标题】：Bootstrap : animation in modal windowBootstrap：模态窗口中的动画
【发布时间】：2016-04-07 22:24:34
【问题描述】：

我想在这样的引导模式窗口中使用 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，动画在页面中正常工作，但在模态窗口中它不起作用，需要您的帮助

【问题讨论】：

标签： javascript jquery css twitter-bootstrap jquery-animate

【解决方案1】：

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

您需要在元素创建后（即打开时）调用wow.init() 或wow.sync()，以便哇代码找到该元素。

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

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

【讨论】：