爲什麼我的元素在動畫完成後不再隱藏？

Question

我試圖完成的是一個盒子的網格，每個盒子在clickde時動畫，然後顯示一個覆蓋整個網格的相應的細節視圖。

詳細視圖包含返回到網格視圖的鏈接。

在我的完整實現中，將有旋轉木馬式的導航從詳細視圖到詳細視圖，帶有動畫。正因爲如此，我想用一個簡單的覆蓋來隱藏盒子的網格，一旦用戶返回到網格視圖，應該將其隱藏起來。

問題是，當動畫完成時，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：

$('.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

使用此：

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

corrected fiddle

你有.on代替.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