Question

我想要完成的是一个盒子网格，每个盒子在clickde时动画，然后显示覆盖整个网格的相应细节视图。

详细信息视图包含一个返回网格视图的链接。

在我的完整实现中，将有详细视图到详细视图的旋转木马式导航，带有动画。因此，我希望使用简单的叠加隐藏框的网格，一旦用户返回到网格视图，该叠加应该恢复为隐藏。

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

我创建了a simple JSFiddle，展示了我试图避免的行为。单击其中一个框时，下一个.expanded-card元素将正确显示。当您点击＆＃34;返回概述＆＃34;时，.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，所以后来的＆＃34; zoomOut＆＃34;动画会再次触发，因此会显示.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

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

1 个答案: