第一個動畫完成後動畫重複，如何取消？

我試圖創建一個設計，在其上單擊一個框，它將滑入另一個視圖，其中包含更多內容，並且當您單擊箭頭時，它將返回。第一個動畫完成後動畫重複，如何取消？

問題是這樣的：

 $(boxes).one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function() { 
      boxes.parent().css({ 
       'height' : '0', 
       'opacity' : '0', 
       'overflow' : 'hidden' 
      }); 

      fboxContentCover.css({ 
      'height' : 'auto', 
      'opacity' : '1', 
      }); 

      fboxContentCover.removeClass('fadeOutLeft').addClass('animated bounceInRight'); 
     }); 

     $(fboxContentCover).one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function() { 

      fboxContentCover.css({ 
       'height' : '0', 
       'opacity' : '0', 
       'overflow' : 'hidden' 
      }); 

      $('.fbox').parent().css({ 
      'height' : 'auto', 
      'opacity' : '1', 
      }); 

      $('.fbox').removeClass('fadeOutLeft').addClass('animated fadeInRight'); 
     });

當第一個完成，它進入第二視圖成功，然而，當你點擊返回，它會再次滑入第一的觀點，但它然後再次閃爍第二個視圖，然後再次返回第一個視圖。

我該如何阻止這種情況發生？

的代碼，一切都在這裏：https://codepen.io/anon/pen/JNodjO

來源

2017-04-13 kinx

你.removeClass似乎不能正常工作 - 類似乎重新連接。

從使用.addClass和.removeClass切換到 - >.toggleClass。

這對像你這樣的場景更好。更容易切換類，因此名稱

來源

2017-04-13 17:52:16

你可以編輯codepen並告訴我你的意思嗎？我改成： 'fboxContentCover.toggleClass（ 'fadeOutLeft動畫bounceInRight'）;' 和 'boxes.toggleClass（ 'fadeOutLeft動畫fadeInRight'）;' 第二種觀點的動畫不會發生，然後回到，動畫停止。 – kinx

@kinx我無法爲你做到這一切！但是這個方法應該可以，祝你好運！ –

第一個動畫完成後動畫重複，如何取消？

回答

相關問題