Javascript 如何防止transitionend事件运行两次

我有一个小应用程序，它使用CSS3添加和删除

来设置章节的动画。在某一点上处于活动状态

我需要删除

。从元素
中处于活动状态
。生成的页面

然后在

转换中添加
。在我需要快速更新z索引时处于活动状态
返回到元素，但是，这样做似乎会触发
transitionend
函数中的代码两次。我想知道是否有人可以建议如何解决这个问题

JS

$('.resulting-page').removeClass('is-active').on('transitionend webkitTransitionEnd oTransitionEnd otransitionend MSTransitionEnd', function () {              
      $('.search-page').removeClass('tier3-override');
      $(this).addClass('is-active');
      console.log('this ran');  
});

JS小提琴
您可以使用Modernizer获得特定于浏览器的转换。Chrome将在transitionend和WebKittTransitionEnd上触发（如果两者都适用）

var transEndEventNames = {
        'WebkitTransition': 'webkitTransitionEnd',  // Saf 6, Android Browser
        'MozTransition': 'transitionend',           // only for FF < 15
        'transition': 'transitionend'               // IE10, Opera, Chrome, FF 15+, Saf 7+
    },
    transEndEventName = transEndEventNames[Modernizr.prefixed('transition')];

return transEndEventName;

var transEndEventNames={
“WebKittTransition”：“WebKittTransitionEnd”，//Saf 6，Android浏览器
'MozTransition'：'transitionend'，//仅适用于FF<15
“transition”：“transitionend”//IE10、Opera、Chrome、FF 15+、Saf 7+
},
transEndEventName=transEndEventNames[现代化前缀（'transition'）；
返回transEndEventName；
在添加最后一个类之前，只需关闭事件，然后重新绑定它？：）嘿@Alex在on事件中停止事件，或者我如何构造代码？我不太明白问题是什么/正在发生，不会发生两次，但是一个简单的变量检查对你有用吗？问题是，如果您单击主幻灯片上的条目链接，然后单击主导航中的搜索子页面链接，然后单击搜索页面上的条目链接，然后单击结果页面上的后退按钮，该页面会上下滑动，就像事件触发两次一样？@styler似乎是您的逻辑错误。在某些情况下，
check
应该在结果页面出现之前设置为
true
，但这永远不会发生。由于它为false，因此立即将
添加回活动类