jquery - CSS transitionEnd 事件仍在监听完成的过渡

Question

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

我正在使用 css transition 来为两者设置动画。 .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 的过渡结束时，已警告的 event.propertyName 是“不透明”，并且在 .childDiv 完成其过渡后立即被触发。

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

这是它的一个 jsfiddle: http://jsfiddle.net/e9uwA/

谢谢你的帮助!

Answer 1

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

因为 childDiv 的事件将传播到 parentDiv