jquery - 类切换但在动画和类移除完成后重新附加自身

Question

我正在尝试创建一个设计，您可以在其中单击一个框，它会滑入另一个包含更多内容的 View ，当您单击箭头时，它会返回。

问题是这样的:

        $(boxes).one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function() {
            boxes.parent().css({ 
                'height' : '0', 
                'opacity' : '0',
                'overflow' : 'hidden'
            });

            fboxContentCover.css({
             'height' : 'auto',
             'opacity' : '1',
            });

            fboxContentCover.removeClass('fadeOutLeft').addClass('animated bounceInRight');
        });

        $(fboxContentCover).one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function() {

            fboxContentCover.css({ 
                'height' : '0', 
                'opacity' : '0',
                'overflow' : 'hidden'
            });

            $('.fbox').parent().css({
             'height' : 'auto',
             'opacity' : '1',
            });

            $('.fbox').removeClass('fadeOutLeft').addClass('animated fadeInRight');
        });

当第一个完成后，它成功进入第二个 View ，但是当你点击返回时，它会再次滑入第一个 View ，但它会再次闪现第二个 View 然后返回到再次是第一个 View 。

我怎样才能阻止这种情况发生？

代码和一切都在这里:https://codepen.io/anon/pen/JNodjO

当添加 .toggleClass 而不是 .removeClass().addClass() 时，动画完全停止工作。

Answer 1

看起来，当您单击第一组框时，animationend 会在这些框上触发，然后它们会滑出 View 。

当您单击第二组上的“后退按钮”时，连接到后退按钮 的动画事件将触发，并且第一组框会返回到 View 中。 (到目前为止很酷)

但是现在，webkitAnimationEnd 会在第一组框返回 View 时触发，这会再次冗余地重复滑动效果。

这两个事件的时间出现不同的事实很奇怪，但最重要的是你的.one() 连接了 Chrome recognizes 的两个事件你只想要一个的地方。使用这个 Modernizr 函数:

function whichAnimationEvent() {
      var t,
          el = document.createElement("fakeelement");
      var animations = {
          "animation"      : "animationend",
          "OAnimation"     : "oAnimationEnd",
          "MozAnimation"   : "animationend",
          "WebkitAnimation": "webkitAnimationEnd"
      };
      for(t in animations) {
          if (el.style[t] !== undefined){
              return animations[t];
          }
      }
  }

像这样:

 $(boxes).one(whichAnimationEvent(), function(ev) { }

似乎解决了问题，你可以在这里查看:https://codepen.io/anon/pen/aWzaqN