为什么动画完成后我的元素不再隐藏？

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：

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