[英]How do I know css transition animation is ended?
I want to set animating = false
once the transition animation is ended, I used settimeout , it works ok on desktop but the timing is wrong on ipad, Is it possible to know the css animation of an object ended exactly? 过渡动画结束后,我想设置animating = false
,我使用settimeout,它在桌面上可以正常运行,但在ipad上的计时是错误的,是否有可能知道对象的CSS动画完全结束了?
CSS: CSS:
#pane{ -webkit-transition: -webkit-transform 1s ease-out ; }
JavaScript: JavaScript:
function css_translate(j, k) {
var i = 'translate(' + k + 'px,0px)';
j.css({
'transform': i,
'-moz-transform': i,
'-webkit-transform': i,
'-o-transform': i,
});
}
if (animating == false) {
animating = true;
css_translate($pane, handler.page[handler.currentp + 1] * -1);
}
setTimeout(function() {
handler.animating = false;
}, transitiontime);
The end of the CSS transition triggers a transitionEnd
event , so you can know exactly. CSS过渡的结束会触发transitionEnd
事件 ,因此您可以确切知道。 These events are using the vendor prefixes, so you need to deal with that ... for Chrome/Webkit, it's webkitTransitionEnd
: 这些事件使用供应商前缀,因此您需要处理...对于Chrome / Webkit,它是webkitTransitionEnd
:
j.on('webkitTransitionEnd', function(event) {
handler.animating = false;
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.