CSS 转换时的回调
-
21-09-2019 - |
题
CSS 转换完成后是否可以收到通知(如回调)?
解决方案
我知道的Safari实现 webkitTransitionEnd 回调可以直接连接到与所述过渡元素。
它们的例子(重新格式化,以多行):
box.addEventListener(
'webkitTransitionEnd',
function( event ) {
alert( "Finished transition!" );
}, false );
其他提示
是的,如果浏览器支持此类操作,则转换完成时会触发一个事件。然而,实际事件因浏览器而异:
- Webkit 浏览器(Chrome、Safari)使用
webkitTransitionEnd
- 火狐使用
transitionend
- IE9+使用
msTransitionEnd
- 歌剧用途
oTransitionEnd
但是您应该知道 webkitTransitionEnd
并不总是火!这已经让我困惑了很多次,并且如果动画对元素没有影响,似乎就会发生这种情况。为了解决这个问题,在未按预期触发事件处理程序的情况下,使用超时来触发事件处理程序是有意义的。关于此问题的博客文章可在此处找到: http://www.cuppadev.co.uk/the-trouble-with-css-transitions/ <-- 500 内部服务器错误
考虑到这一点,我倾向于在一段代码中使用此事件,看起来有点像这样:
var transitionEndEventName = "XXX"; //figure out, e.g. "webkitTransitionEnd"..
var elemToAnimate = ... //the thing you want to animate..
var done = false;
var transitionEnded = function(){
done = true;
//do your transition finished stuff..
elemToAnimate.removeEventListener(transitionEndEventName,
transitionEnded, false);
};
elemToAnimate.addEventListener(transitionEndEventName,
transitionEnded, false);
//animation triggering code here..
//ensure tidy up if event doesn't fire..
setTimeout(function(){
if(!done){
console.log("timeout needed to call transition ended..");
transitionEnded();
}
}, XXX); //note: XXX should be the time required for the
//animation to complete plus a grace period (e.g. 10ms)
笔记:要获取转换事件结束名称,您可以使用作为答案发布的方法:如何跨浏览器规范 CSS3 转换功能?.
笔记:这个问题还涉及:- CSS3 过渡事件
我使用下面的代码,是比试图检测哪个特定结束事件浏览器使用简单得多。
$(".myClass").one('transitionend webkitTransitionEnd oTransitionEnd otransitionend MSTransitionEnd',
function() {
//do something
});
可替换地,如果你使用自举则可以简单地做
$(".myClass").one($.support.transition.end,
function() {
//do something
});
这是监守它们包括在bootstrap.js以下
+function ($) {
'use strict';
// CSS TRANSITION SUPPORT (Shoutout: http://www.modernizr.com/)
// ============================================================
function transitionEnd() {
var el = document.createElement('bootstrap')
var transEndEventNames = {
'WebkitTransition' : 'webkitTransitionEnd',
'MozTransition' : 'transitionend',
'OTransition' : 'oTransitionEnd otransitionend',
'transition' : 'transitionend'
}
for (var name in transEndEventNames) {
if (el.style[name] !== undefined) {
return { end: transEndEventNames[name] }
}
}
return false // explicit for ie8 ( ._.)
}
// http://blog.alexmaccaw.com/css-transitions
$.fn.emulateTransitionEnd = function (duration) {
var called = false, $el = this
$(this).one($.support.transition.end, function () { called = true })
var callback = function () { if (!called) $($el).trigger($.support.transition.end) }
setTimeout(callback, duration)
return this
}
$(function () {
$.support.transition = transitionEnd()
})
}(jQuery);
在 jQuery.transit插件,对CSS3转换和过渡的一个插件,可以打电话给你的CSS动画从脚本,并给您一个回调。
此可以很容易地与transitionend
事件来实现见文档此处
一个简单的例子:
document.getElementById("button").addEventListener("transitionend", myEndFunction);
function myEndFunction() {
this.innerHTML = "Transition event ended";
}
#button {transition: top 2s; position: relative; top: 0;}
<button id="button" onclick="this.style.top = '55px';">Click me to start animation</button>
不隶属于 StackOverflow