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 小提琴 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;