最初のアニメーションが終了した後にアニメーションが繰り返されます。どのようにキャンセルするのですか？

Question

私は、ボックスをクリックすると、より多くのコンテンツを含む別のビューにスライドするデザインを作成しようとしています。矢印をクリックすると、それが表示されます。

問題はこれです：最初の1が完了すると

 $(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'); 
     }); 

、それが成功した2番目のビューに行くあなたが戻ってクリックすると、しかし、それは再び最初のビューにスライドさせ、それよ2番目のビューをもう一度フラッシュしてから最初のビューに戻ります。

どうしたらいいですか？

コードとすべてがここにある：https://codepen.io/anon/pen/JNodjO

Answer 1

あなた.removeClassが正常に動作していないように見える - クラスが再接続されるように表示されます。

スイッチは、.addClassと.removeClassから - >.toggleClassに切り替わります。

あなたのようなシナリオの方が良いです。クラス間の切り替えが容易になるため、名前を