我想淡出一个元素（将其不透明度转换为 0），然后在完成后从 DOM 中删除该元素。
在 jQuery 中，这是直截了当的，因为您可以指定在动画完成后发生的“删除”。但是，如果我想使用 CSS3 过渡来制作动画，无论如何要知道过渡/动画何时完成？
CSS3 过渡完成时的回调
IT技术
javascript
jquery
css
2021-02-03 12:50:13
6个回答
对于过渡，您可以使用以下内容通过 jQuery 检测过渡的结束：
$("#someSelector").bind("transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd", function(){ ... });
Mozilla 有一个很好的参考：
对于动画，它非常相似：
$("#someSelector").bind("animationend webkitAnimationEnd oAnimationEnd MSAnimationEnd", function(){ ... });
请注意，您可以同时将所有浏览器前缀的事件字符串传递给 bind() 方法，以支持在所有支持它的浏览器上触发事件。
更新：
根据 Duck 留下的评论：您使用 jQuery 的.one()方法来确保处理程序只触发一次。例如：
$("#someSelector").one("transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd", function(){ ... });
$("#someSelector").one("animationend webkitAnimationEnd oAnimationEnd MSAnimationEnd", function(){ ... });
更新 2：
jQuerybind()方法已被弃用，on()从jQuery 1.7.bind()
您还可以off()在回调函数上使用方法来确保它只会被触发一次。这是一个等效于使用one()方法的示例：
$("#someSelector")
.on("animationend webkitAnimationEnd oAnimationEnd MSAnimationEnd",
function(e){
// do something here
$(this).off(e);
});
参考：
有一个animationend可以观察到的事件，请参见此处的文档，对于 csstransition动画，您也可以使用该transitionend事件
不需要额外的库，这些都可以与 vanilla JS 一起使用
document.getElementById("myDIV").addEventListener("transitionend", myEndFunction);
function myEndFunction() {
this.innerHTML = "transition event ended";
}#myDIV {transition: top 2s; position: relative; top: 0;}
div {background: #ede;cursor: pointer;padding: 20px;}<div id="myDIV" onclick="this.style.top = '55px';">Click me to start animation.</div>另一种选择是使用jQuery Transit Framework来处理您的 CSS3 转换。过渡/效果在移动设备上表现良好，您不必在 CSS 文件中添加一行凌乱的 CSS3 过渡来制作动画效果。
这是一个示例，当您单击它时，它会将元素的不透明度转换为 0，并且在转换完成后将被删除：
$("#element").click( function () {
$('#element').transition({ opacity: 0 }, function () { $(this).remove(); });
});
对于任何人来说，这可能很方便，这里有一个 jQuery 依赖函数，我成功地通过 CSS 类应用 CSS 动画，然后从之后获得回调。因为我在 Backbone.js 应用程序中使用了它，所以它可能无法完美运行，但可能有用。
var cssAnimate = function(cssClass, callback) {
var self = this;
// Checks if correct animation has ended
var setAnimationListener = function() {
self.one(
"webkitAnimationEnd oanimationend msAnimationEnd animationend",
function(e) {
if(
e.originalEvent.animationName == cssClass &&
e.target === e.currentTarget
) {
callback();
} else {
setAnimationListener();
}
}
);
}
self.addClass(cssClass);
setAnimationListener();
}
我用它有点像这样
cssAnimate.call($("#something"), "fadeIn", function() {
console.log("Animation is complete");
// Remove animation class name?
});
来自http://mikefowler.me/2013/11/18/page-transitions-in-backbone/ 的原始想法
这似乎很方便：http : //api.jqueryui.com/addClass/
更新
在与上述代码和其他选项苦苦挣扎之后，我建议对任何 CSS 动画结束的监听都非常谨慎。随着多个动画的进行，这对于事件监听来说会很快变得混乱。我强烈建议每个动画都使用像GSAP这样的动画库，即使是小动画。
接受的答案目前为 Chrome 中的动画触发两次。这大概是因为它承认webkitAnimationEnd和animationEnd。以下肯定只会触发一次：
/* From Modernizr */
function whichTransitionEvent(){
var el = document.createElement('fakeelement');
var transitions = {
'animation':'animationend',
'OAnimation':'oAnimationEnd',
'MSAnimation':'MSAnimationEnd',
'WebkitAnimation':'webkitAnimationEnd'
};
for(var t in transitions){
if( transitions.hasOwnProperty(t) && el.style[t] !== undefined ){
return transitions[t];
}
}
}
$("#elementToListenTo")
.on(whichTransitionEvent(),
function(e){
console.log('Transition complete! This is the callback!');
$(this).off(e);
});