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;

如何防止transitionend事件运行两次

1 个答案: