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的过渡结束时，事件。被警告的propertyName为"不透明度"，并在.childDiv完成转换后立即被触发。

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

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

谢谢你的帮助!

Answer 1

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

因为childDiv的事件将传播到parentDiv