Webkit transitionEnd事件分组

Question

我有一个附加了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类同时应用这两种样式，因为左侧和顶部的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“属性完成时触发。如果这两个属性都设置为相同的持续时间和延迟，则可能效果最好。同样，如果你只改变"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 );

这将确保您的代码每100ms最多运行一次。您可以根据需要更改setTimeout延迟。

Answer 2

只需删除该事件：

var transEnd = function(event) {
   event.target.removeEventListener("webkitTransitionEnd",transEnd);
};

它将为第一个属性触发，而不是为其他属性触发。

Answer 3

如果你更喜欢在JQuery中使用它，可以试试这个。注意，有一个事件参数来存储事件对象，并在相应的函数中使用。

$("#divId").bind('oTransitionEnd transitionEnd webkitTransitionEnd', event, function() { 
    alert(event.propertyName) 
});