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

我有一个小应用程序，动画部分进出使用CSS3添加和在一个点上移除.is-active我需要从要素.resulting-page删除.is-active然后transitionend在后面加上.is-active的元素因为我需要做一个快速的Z-index更新，但是这样做似乎会触发两次函数中的代码。想知道是否有人可以建议如何解决这个问题？如何防止transitionend事件被运行两次

$('.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/

来源

2013-05-22 styler

添加最后一个类之前，只需关闭事件并重新绑定它之后？ :) – Alex

嘿@Alex是否停止on事件中的事件或我如何构造代码？ – styler

我不知道问题是什么，发生了什么，不应该发生两次，但会为你做一个简单的变量检查吗？ http://jsfiddle.net/aagTH/17/ – Alex

你可以使用Modernizr的，以获得特定浏览器transitionend。如果两者都适用，则Chrome会在转换终端和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;

来源

2014-10-31 07:56:23 casper60

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

回答

相关问题