なぜ、アニメーションが完了した後、私の要素が隠されなくなったのですか？

Question

私が達成しようとしているのは、グリッド全体です。クリックすると各ボックスがアニメーションされ、グリッド全体をカバーする詳細ビューが表示されます。

詳細ビューには、グリッドビューに戻るリンクが含まれています。

私の完全な実装では、ディテールビューからディテールビューへのカルーセルスタイルのナビゲーションがアニメーションとともに表示されます。このため、単純なオーバーレイでボックスのグリッドを非表示にしたい場合、ユーザーがグリッドビューに戻ると非表示に戻す必要があります。

アニメーションが完了すると、JQuery hide()コールが削除されたように見えることがあります。

私が避けようとしている動作を示すa simple JSFiddleを作成しました。いずれかのボックスをクリックすると、次の.expanded-card要素が正しく表示されます。 「概要に戻る」をクリックすると、.expanded-card要素が適切にフェードアウトし、.grid-backgroundオーバーレイが非表示になります。

しかし、zoomOutアニメーションが完了すると、.grid-backgroundが再び表示されます。どうして？

HTML：

<div class="container"> 
     <div class="row grid-3x3-container"> 
      <div class="col-xs-10 col-xs-offset-1 text-center"> 
       <div class="container-fluid grid-3x3"> 
        <div class="row"> 
         <div class="col-xs-4 grid-item"> 
          <div class="flip-box animated"> 
           <h3>Title 1</h3> 
          </div> 
         </div> 
         <div class="expanded-card animated col-xs-12"> 
          <div class="card-header"> 
           <span class="card-nav-back"> back to overview</span> 
          </div> 
          <div class="card-body"> 
           <p> 
           Text goes here! 
           </p> 
          </div> 
         </div> 
         <div class="col-xs-4 grid-item"> 
          <div class="flip-box animated"> 
           <h3>Title 2</h3> 
          </div> 
         </div> 
         <div class="expanded-card animated col-xs-10 col-xs-offset-1"> 
          <div class="card-header "> 
           <span class="card-nav-back"> back to overview</span> 
          </div> 
          <div class="card-body"> 
           <p> 
           Text goes here! 
           </p> 
          </div> 
         </div> 
         <div class="col-xs-4 grid-item"> 
          <div class="flip-box animated"> 
           <h3>Title 3</h3> 
          </div> 
         </div> 
         <div class="expanded-card animated col-xs-10 col-xs-offset-1"> 
          <div class="card-header "> 
           <span class="card-nav-back"> back to overview</span> 
          </div> 
          <div class="card-body"> 
           <p> 
           Text goes here! 
           </p> 
          </div> 
         </div> 
         <div class="col-xs-12 grid-background"> 

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

JavaScriptを：あなたは.onの代わりを持っていた

 expandedCard.one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function() { 
      expandedCard.removeClass('zoomIn'); 
      $('.grid-background').show(); 
     }); 

corrected fiddle

：

$('.flip-box').on("click", function() { 
     var currentCard = $(this).parent(); 
     currentCard.addClass('current-selection'); 
     var expandedCard = currentCard.next('.expanded-card'); 
     currentCard.addClass('flipOutX'); 
     currentCard.on('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function() { 
      expandedCard.show(); 
      expandedCard.addClass('zoomIn'); 
      currentCard.find('h3').show(); 
      expandedCard.on('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function() { 
      expandedCard.removeClass('zoomIn'); 
      $('.grid-background').show(); 
      }); 
     }); 
    }); 
    $('.expanded-card').on("click", '.card-header>.card-nav-back', function() { 
     var currentGridItem = $('.current-selection'); 
     var currentCard = currentGridItem.next('.expanded-card'); 
     currentGridItem.removeClass('current-selection'); 
     currentCard.addClass('zoomOut'); 
     currentCard.one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function() { 
      currentCard.removeClass('zoomOut'); 
      currentCard.hide(); 
     }); 
     $('.grid-background').hide(); 
    }); 

Answer 1

これを使用します.oneであるため、後の「zoomOut」アニメーションによって再びトリガーされるので、.grid-backgroundと表示されます。

.expanded-cardをクリックしてコードを正しく入力していたのかもしれません。

ハンドラを毎回バインドする代わりに、.zoomInおよび.zoomOutクラスにハンドラを委任することもできます。

$(".container").on("webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend", ".zoomIn", function() { 
    $(this).removeClass("zoomIn"); 
    $(".grid-background").show(); 
}); 

$(".container").on("webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend", ".zoomOut", function() { 
    $(this).removeClass("zoomOut").hide(); 
}); 

DEMO