javascript - Webkit transitionEnd 事件分组

Question

我有一个 HTML 元素，我附加了一个 webkitTransitionEnd 事件。

function transEnd(event) {
    alert( "Finished transition!" );
    
}

var node = document.getElementById('node');
node.addEventListener( 'webkitTransitionEnd', transEnd, false );

然后我继续更改其 CSS left 和 top 属性，例如:

node.style.left = '400px';
node.style.top = '400px';

这会导致 DIV 平滑地移动到新位置。但是，当它完成时，会出现 2 个警告框，而我原以为动画结束时只会出现一个。当我只更改 CSS left 属性时，我会收到一个警告框 - 这意味着对样式的两次更改被注册为两个单独的事件。我想将它们指定为一个事件，我该怎么做？

我不能使用 CSS 类同时应用两种样式，因为 left 和 top CSS 属性是变量，我只能在运行时知道。

Answer 1

检查 propertyName 事件:

function transEnd(event) {
    if (event.propertyName === "left") {
        alert( "Finished transition!" );
    }
}

var node = document.getElementById('node');
node.addEventListener( 'webkitTransitionEnd', transEnd, false );

这样，它只会在“left”属性完成时触发。如果两个属性都设置为相同的持续时间和延迟，这可能效果最好。此外，如果您仅更改“左”或同时更改两者，这将起作用，但如果您仅更改“顶部”，则不会。

或者，您可以使用一些计时器技巧:

var transEnd = function anon(event) {
    if (!anon.delay) {
        anon.delay = true;

        clearTimeout(anon.timer);
        anon.timer = setTimeout(function () {
            anon.delay = false;
        }, 100);

        alert( "Finished transition!" );
    }
};

var node = document.getElementById('node');
node.addEventListener( 'webkitTransitionEnd', transEnd, false );

这应该确保您的代码每 100 毫秒最多运行 1 次。您可以更改 setTimeout 延迟以满足您的需要。