Jquery 类进行切换，但在动画和类移除完成后重新附着自身

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

问题是：

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

第一个视图完成后，它将成功转到第二个视图，但是，当您单击“上一步”时，它将再次滑入第一个视图，但它将再次刷新第二个视图，然后再次返回第一个视图

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

代码和所有内容都在这里：

---

添加

.toggleClass

而不是

.removeClass（）.addClass（）

时，动画完全停止工作。

当您单击第一组框时，

animationend

会在这些框上激发，并将它们滑出视图

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

但是现在，

webkitAnimationEnd

会在第一组框返回视图时激发，从而再次重复滑动效果

这两个事件的计时看起来不同这一事实很奇怪，但底线是您的

.one（）

正在连接两个事件，而您只需要一个。使用此现代化功能：

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) { }

---

似乎解决了问题，您可以在此处查看：

谢谢！我只想问你一个问题！2017年，这些供应商前缀似乎已经出现在animate.css github上好几年了。现在使用这些有关系吗？谢谢你的帮助！似乎表明所有浏览器都应该识别

动画

。