CSS transitionEnd 事件仍在监听完成的过渡答案

【问题标题】：CSS transitionEnd event still listening to finished transitionCSS transitionEnd 事件仍在监听完成的过渡
【发布时间】：2013-04-25 08:52:08
【问题描述】：

我有两个 div 元素，即 .parentDiv 和 .childDiv

我正在使用 css 过渡来为两者设置动画。 .childDiv 应该首先为其不透明度设置动画，然后在 transitionend 上设置动画，为 .parentDiv 高度设置动画，然后调用警报检查。

所以这里是代码：

    $('.childDiv').addClass('faded').on('transitionend', function(){
            $('.childDiv').off('transitionend');

            $('.parentDiv')
                .addClass('no-height')
                .on('transitionend',event, function() {
                    alert(event.propertyName);
                });
        });

问题：

在.addClass('faded') 之后，它继续执行第二次转换（这是正确的）。但是在.parentDiv 的ontransitionend 上，已警告的event.propertyName 是“不透明”，并且在.childDiv 完成其转换后立即被触发。

我希望它仅在调整高度时执行。不要误会，一旦高度转换完成，“高度”也会被提醒，但它似乎还会读取除高度调整之外的其他转换。

这是一个 jsfiddle ： http://jsfiddle.net/e9uwA/

感谢您的帮助！

【问题讨论】：

标签： jquery css css-transitions

【解决方案1】：

只需在 $('.childDiv').on() 中添加 event.stopPropagation()

因为 childDiv 的事件会传播到 parentDiv

【讨论】：

哇，这么简单！我从来没有完全理解 event.stopPropagation();但也许我现在有点明白了。谢谢！