Question

我有两个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/

感谢您的帮助！

Answer 1

只需在$（'。childDiv'）中添加event.stopPropagation（）。on（）

因为childDiv的事件将传播到parentDiv

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

1 个答案: