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

Question

我想要完成的是一个方框网格，其中每个方框在单击时都会动画化，然后显示覆盖整个网格的相应详细视图。

详细视图包括 link 到 return 回到网格视图。

在我的完整实现中，将有从详细视图到详细视图的轮播式导航，并带有动画。正因为如此，我想用一个简单的覆盖隐藏盒子的网格，一旦用户 return 进入网格视图，它应该恢复隐藏。

问题是 JQuery hide() 调用似乎在动画完成时被删除...有时，但并非总是如此。

我创建了 a simple JSFiddle 来展示我试图避免的行为。单击其中一个框时，下一个 .expanded-card 元素会正确显示。当您单击 "back to overview" 时，.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

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

Why is my element no longer hidden after the animation is complete?

javascript

jquery

css

animation

animate.css