Question

所有

我的情况大致如下：

我的HTML页面包含div（我称之为“parentDiv”），我正在执行转换。当转换结束时，它应该调用“onTransitionEndParent”

parentDiv包含一个div（我称之为“childDiv”），我正在执行不同的转换。当转换结束时，它应该调用“onTransitionEndChild”。

所以，我的代码大致如下：

parentDiv.addEventListener("webkitTransitionEnd", onTransitionEndParent, false);
childDiv.addEventListener("webkitTransitionEnd", onTransitionEndChild, false);

我找到的问题......

当parentDiv的转换结束（正确）时，将调用

onTransitionEndParent。但是，当childDiv的转换结束时，它被 ALSO 调用（不是我预期的......）

换句话说......

onTransitionEndChild被调用
onTransitionEndParent 当childDiv的转换结束时 AND AGAIN

这是正确的行为，还是我做错了什么？

有没有办法确保onDnsitionEndParent仅在parentDiv的转换结束时被调用，而不是当它的任何子div的转换结束时才被调用？

非常感谢提前。

Answer 1

transitionEnd是所谓的冒泡事件，正在从子项向其父项发送（冒泡）。

您的选择：

分析事件对象的event.target属性 - 它应包含已结束过渡的元素。
或者在每个子元素上安装transitionEnd事件处理程序并调用 event.stopPropagation()以防止其冒泡。

Answer 2

我在上次Chrome更新后遇到了同样的问题。儿童动画触发了父母的动画。这仅发生在桌面版Chrome浏览器中，而不是FF或Chrome移动版。

对于任何有兴趣的人，我使用以下方法解决了这个问题：

        $(element).on("animationend webkitAnimationEnd", function(){
            //do something
        })
        .children().on("animationend webkitAnimationEnd", function(){
             return false;   //you can just use event.stopPropagation()
         });

Answer 3

要添加到@ c-smiles应答，检查event.propertyName会在元素上有多个转换时发挥作用。所以，例如 -

button.addEventListener('transitionend', function(event) {
  if (event.target.classList.contains('button') && event.propertyName === 'opacity') {
    button.classList.add('hide');
  }
}, false);

当转换结束于div时转发的webkitTransitionEnd事件AND转换在所有CHILD div上结束？

3 个答案: