javascript - 如何防止 transitionend 事件被运行两次

Question

我有一个小应用程序，它使用 CSS3 添加和删除 .is-active 动画部分，我需要从中删除 .is-active元素 .resulting-page 然后在 transitionend 上将 .is-active 添加回元素，因为我需要快速更新 z-index ，但是这样做似乎会触发 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 fiddle http://jsfiddle.net/kyllle/aagTH/16/

Answer 1

您可以使用 Modernizr 获取浏览器特定的过渡结束。如果同时应用，Chrome 将在 transitionend 和 webkitTransitionEnd 上触发。

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;