我一直在使用以下内容来检测
CSS3过渡的结束,如下所示： –
CACHE.previewControlWrap.css({
'bottom':'-217px'
}).one('webkitTransitionEnd transitionend msTransitionEnd oTransitionEnd',function () {
CACHE.songWrap.css({
'bottom': '0'
});
});
这完美地工作,发生CSS转换,然后当它完成时,另一个发生.
但是,当我将此匿名函数嵌套到第三级时,它不起作用.第三个转换’end’事件与第二个事件同时触发,而不是一个接一个地链接它们(就像jQuery .animate()一样)
我想做的是将’transitionend’事件与’特定’元素联系起来.目前,它似乎在任何元素上寻找transitionend事件并相应地触发.如果没有,是否有另一种解决方法,以便我可以有三个连续的css转换事件排队在前一个完成之后全部触发.
提前致谢.
以下是导致问题的代码： –
if(Modernizr.csstransitions){
CACHE.leftcolbottom.css({
'left':'-230px'
});
CACHE.songwrap.css({
'left':'100%','right': '-100%'
});
CACHE.previewControlWrap.css({
'bottom':'-217px'
}).one('webkitTransitionEnd transitionend msTransitionEnd oTransitionEnd',function () {
CACHE.songWrap.css({
'bottom': '0'
});
CACHE.middle.css({
'bottom': '350px'
}).one('webkitTransitionEnd transitionend msTransitionEnd oTransitionEnd',function () {
CACHE.slidewrap.css({
'left': '50%','right': '0%'
});
CACHE.leftcoltop.css({
'left': '0%'
});
});
});
}
解决方法
好吧,我实际上已经找到了答案,希望这可以帮助其他人解决同样的问题.
解决方案是使用标准的jQuery .on()方法而不是“fire once”.one()方法.然后检查目标以查看它是否是绑定事件的元素,然后最后删除同一匿名函数中的事件处理程序.
在我的例子中,使’第三’嵌套转换代码看起来像这样： –
}).on('webkitTransitionEnd transitionend msTransitionEnd oTransitionEnd',function (e) {
if($(e.target).is(this)){
CACHE.slidewrap.css({
'left': '50%','right': '0%'
});
CACHE.leftcoltop.css({
'left': '0%'
});
$(this).off('webkitTransitionEnd transitionend msTransitionEnd oTransitionEnd');
}
});
如果其他人有更优雅的解决方案,请告诉我,我会酌情给你答案.
