CSS transitionEnd事件仍在侦听已完成的转换

Question

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

我正在使用css过渡来动画这两个。.childDiv应该首先对其不透明度进行动画处理，然后在转换结束时对.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完成它的过渡就会被触发。

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

下面是它的一个jsfiddle：http://jsfiddle.net/e9uwA/

谢谢你的帮助!

Answer 1

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

因为childDiv事件将传播到parentDiv