Почему мой элемент больше не скрывается после завершения анимации?

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