Question

我正在尝试创建一个单击某个框的设计，它会滑入另一个包含更多内容的视图，当您单击箭头时，它将返回。

问题在于：

        $(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');
        });

当完成第一个视图时，它会成功进入第二个视图，但是，当您单击后退时，它将再次滑入第一个视图，但它会再次闪烁第二个视图，然后返回到第一个观点，再次。

如何阻止这种情况发生？

代码和所有内容都在这里：https://codepen.io/anon/pen/JNodjO

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

Answer 1

看来，当您点击第一组方框时，animationend会在这些方框上触发，然后它们会滑出视野。

单击第二组上的“后退按钮”时，连接到后退按钮的动画事件将触发，第一组框将返回视图。（到目前为止酷）

但现在，webkitAnimationEnd会在第一组框中触发，因为它们会重新进入视图，这会再次重复滑动效果。

两个事件的时间显示不同的事实是奇数，但最后一行是你的.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

在动画和类删除完成后，类会切换但重新附加

1 个答案: