我一直在使用以下方法来检测 CSS3 过渡的结束,如下所示:-
CACHE.previewControlWrap.css({
'bottom':'-217px'
}).one('webkitTransitionEnd transitionend msTransitionEnd oTransitionEnd', function () {
CACHE.songWrap.css({
'bottom': '0'
});
});
这完美地工作,发生 CSS 转换,然后当它完成时,另一个发生。
但是,当我将此匿名函数嵌套到第三层时,它不起作用。第三个过渡“结束”事件与第二个同时触发,而不是一个接一个地链接它们(就像 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%'
});
});
});
}