javascript 当转换在 div 上结束并且转换在所有 CHILD div 上结束时触发 webkitTransitionEnd 事件？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6874958/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
webkitTransitionEnd event fired when transitions end on div AND transitions end on all CHILD divs?
提问by mattstuehler
All,
全部，
I have a situation that looks roughly like this:
我的情况大致如下：
My HTML page a contains div (which I'll call "parentDiv") on which I'm performing a transition. When that transition ends, it should call "onTransitionEndParent"
我的 HTML 页面 a 包含我正在执行转换的div（我将其称为"parentDiv"）。当转换结束时，它应该调用“onTransitionEndParent”
parentDiv contains a div (which I'll call "childDiv") on which I'm performing a differenttransition. When that transition ends, it should call "onTransitionEndChild".
parentDiv 包含一个 div（我将其称为“childDiv”），我将在该div上执行不同的转换。当转换结束时，它应该调用"onTransitionEndChild"。
So, my code looks roughly like this:
所以，我的代码大致如下：
parentDiv.addEventListener("webkitTransitionEnd", onTransitionEndParent, false);
childDiv.addEventListener("webkitTransitionEnd", onTransitionEndChild, false);
The problem I'm finding...
我发现的问题...
onTransitionEndParent is called when the parentDiv's transition ends (correct). However, it's ALSOcalled when childDiv's transition ends (not what I expected...)
onTransitionEndParent 在 parentDiv 的过渡结束（正确）时被调用。然而，它的另调用时childDiv过渡端（不出我所料...）
In other words...
换句话说...
- onTransitionEndChild is called when childDiv's transition ends
- onTransitionEndParent is called when parentDiv's transition ends AND AGAINwhen childDiv's transition ends
- 当 childDiv 的过渡结束时调用 onTransitionEndChild
- onTransitionEndParent 在 parentDiv 的过渡结束时调用，并且在 childDiv 的过渡结束时 再次调用
Is this the correct behavior, or am I doing something wrong?
这是正确的行为，还是我做错了什么？
Is there a way to make sure that onTransitionEndParent is ONLY called when the parentDiv's transition ends, and NOT when any of it's child div's transitions end?
有没有办法确保 onTransitionEndParent 只在 parentDiv 的过渡结束时调用，而不是在它的任何子 div 的过渡结束时调用？
Many thanks in advance.
提前谢谢了。
回答by c-smile
transitionEndis so called bubbling event that is being dispatched (bubbles up) from child to its parents.
transitionEnd是所谓的冒泡事件，它从孩子发送（冒泡）到它的父母。
Options for you:
适合您的选项：
- Either analyze
event.targetproperty of the event object - it should contain element with ended transition. - Or to install transitionEnd event handlers on each child element and call
event.stopPropagation()so to prevent its bubbling.
- 要么分析
event.target事件对象的属性 - 它应该包含具有结束转换的元素。 - 或者在每个子元素上安装 transitionEnd 事件处理程序并调用
event.stopPropagation()它以防止其冒泡。
回答by Roumelis George
I encountered the same problem after the last chrome update. Children animations triggered animationend for the parent. This only happened in Chrome for desktop and not in FF or Chrome for mobile.
我在上次 chrome 更新后遇到了同样的问题。子动画触发了父动画的动画结束。这仅发生在桌面版 Chrome 中，而不发生在 FF 或移动版 Chrome 中。
For anyone interested I solved this by using:
对于任何感兴趣的人，我使用以下方法解决了这个问题：
$(element).on("animationend webkitAnimationEnd", function(){
//do something
})
.children().on("animationend webkitAnimationEnd", function(){
return false; //you can just use event.stopPropagation()
});
回答by scottsandersdev
To add to @c-smiles answer, checking for event.propertyName helps when there are multiple transitions on the element. So, for example -
要添加到@c-smiles 答案中，当元素上有多个转换时，检查 event.propertyName 会有所帮助。所以，例如 -
button.addEventListener('transitionend', function(event) {
if (event.target.classList.contains('button') && event.propertyName === 'opacity') {
button.classList.add('hide');
}
}, false);
