Bootstrap: анимация в модальном окне

Question

я хочу использовать 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(), элемент lightbox еще не существует.

После того, как элемент был создан (то есть, когда он открыт), вам нужно позвонить либо wow.init(), либо wow.sync(), чтобы найти элемент.

Bootstrap может запускать обратный вызов, когда модаль создан и показан. Ваш будет выглядеть примерно так

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