引導animationing標籤內容腳本

Question

嘿，大家好我使用引導標籤組件在我的項目之一，現在我想一些動畫添加到我的引導標籤，下面是HTML代碼：

<ul class="nav nav-tabs" id="myTab"> 
       <li class="active"><a href="#sectionA">General fitness</a></li> 
       <li><a href="#sectionB">Cardio</a></li> 
       <li><a href="#sectionC">weight training</a></li> 
       <li><a href="#sectionD">weight loss</a></li> 
      </ul> 
      <div class="tab-content"> 
       <div id="sectionA" class="tab-pane fade in active"> 
        <div class="container"> 
         <div class="row"> 
          <div class="col-md-offset-1 col-md-5 clearfix"> 
           <img src="images/traning/traning-image.jpg" alt="stretching exercise" class="pull-right animated bounceInLeft"> 
          </div> 
          <div class="col-md-5 animated bounceInRight" > 
           <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Delectus eligendi odit aspernatur asperiores quia laudantium porro velit. Eligendi neque, quos quo at eos earum qui harum, temporibus dolore laboriosam aperiam.</p> 

          </div> 
         </div> 
        </div> 
       </div> 
       <div id="sectionB" class="tab-pane fade"> 
        <div class="container"> 
         <div class="row"> 
          <div class="col-md-offset-1 col-md-5 clearfix"> 
           <img src="images/traning/traning-image.jpg" alt="stretching exercise" class="pull-right"> 
          </div> 
          <div class="col-md-5" > 
           <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Delectus eligendi odit aspernatur asperiores quia laudantium porro velit. Eligendi neque, quos quo at eos earum qui harum, temporibus dolore laboriosam aperiam.</p> 

        </div> 
       </div> 
      </div> 
     </div> 
     <div id="sectionC" class="tab-pane fade"> 
      <div class="container"> 
       <div class="row"> 
        <div class="col-md-offset-1 col-md-5 clearfix"> 
         <img src="images/traning/traning-image.jpg" alt="stretching exercise" class="pull-right"> 
        </div> 
        <div class="col-md-5" > 
         <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Delectus eligendi odit aspernatur asperiores quia laudantium porro velit. Eligendi neque, quos quo at eos earum qui harum, temporibus dolore laboriosam aperiam.</p> 

        </div> 
       </div> 
      </div> 
     </div> 
     <div id="sectionD" class="tab-pane fade"> 
      <div class="container"> 
       <div class="row"> 
        <div class="col-md-offset-1 col-md-5 clearfix"> 
         <img src="images/traning/traning-image.jpg" alt="stretching exercise" class="pull-right"> 
        </div> 
        <div class="col-md-5" > 
         <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Delectus eligendi odit aspernatur asperiores quia laudantium porro velit. Eligendi neque, quos quo at eos earum qui harum, temporibus dolore laboriosam aperiam.</p> 

        </div> 
       </div> 
      </div> 
     </div> 
    </div> 

現在一切工作正常，請注意我如何爲<img>和第二個<div class="col-md-5">添加動畫。

下面

是我寫的應用動畫腳本，每次一個標籤被點擊：

jQuery腳本：

$('#myTab').on('click' , 'li a' , function(){ 

    $this = $(this); 
    var str_href = $this.attr('href'); 

     str_image  = str_href + ' ' + 'img'; 
     str_contentdiv = str_href + ' ' + '.add-animation'; 

     $(str_image).removeClass('animated bounceInLeft'); 
     $(str_contentdiv).removeClass('animated bounceInRight'); 

     setTimeout(function(){ 
      $(str_image).addClass('animated bounceInLeft'); 
      $(str_contentdiv).addClass('animated bounceInRight'); 

      setTimeout(function(){ 
       $(str_image).removeClass('animated bounceInLeft'); 
       $(str_contentdiv).removeClass('animated bounceInRight'); 
      }, 2000); 
     }, 100); 

}); 

其短暫的甜蜜，問題是去除類的setTimeout函數需要2秒鐘，這意味着如果用戶變成一個點擊狂人，動畫將不會運行，原因是，我無法愛上2秒規則，動畫運行了2秒。

如果有人能夠幫助我加入失蹤的陪審團，我將不勝感激，I.E.我如何讓動畫每次點擊一個標籤？

謝謝。

Alexander。

Answer 1

在元素上添加一個事件列表器，用於animationend/transitionend事件 首先獲取帶有正確前綴的轉換結束名稱。 （使用Modernizr或讀this article實現邏輯不Modernizr的獲得與前綴事件名稱）

var transEndEventNames = { 
    'WebkitTransition' : 'webkitTransitionEnd',// Saf 6, Android Browser 
    'MozTransition' : 'transitionend',  // only for FF < 15 
    'transition'  : 'transitionend'  // IE10, Opera, Chrome, FF 15+, Saf 7+ 
}, 
transEndEventName = transEndEventNames[ Modernizr.prefixed('transition') ]; 

然後回調添加事件監聽

element.addEventListener(transEndEventName, transitionEndCallback); 

而且你可以實現你需要的時候動畫該元素變爲活動狀態，只有一次

#myTab.active img { 
    animation: bounce-left-right 2s ease 1; //Actually is 1 by default so it's not necessary 
} 
@keyframe { 
    0% {//bounce left animation} 
    100% {//bounce right animation} 
}