Webkit transitionEnd事件分组 [英] Webkit transitionEnd event grouping

问题描述

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

I have a HTML element to which I have attached a webkitTransitionEnd event.

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

}

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

然后我继续更改其CSS左侧和顶部属性，如：

Then I proceed to change its CSS left and top properties like:

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

这将使DIV顺利移动到新位置。但是，当它完成，2个警报框出现，而我期待只有一个在动画结束。当我只改变CSS left属性时，我得到一个警告框 - 所以这意味着对风格的两个更改被注册为两个单独的事件。我想将它们指定为一个事件，我该如何做？

This causes the DIV to move smoothly to the new position. But, when it finishes, 2 alert boxes show up, while I was expecting just one at the end of the animation. When I changed just the CSS left property, I get one alert box - so this means that the two changes to the style are being registered as two separate events. I want to specify them as one event, how do I do that?

我不能使用CSS类同时应用这两种样式，因为左

I can't use a CSS class to apply both the styles at the same time because the left and top CSS properties are variables which I will only know at run time.

推荐答案

只需删除事件：

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

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

it will fire for the first property and not for the others.

这篇关于Webkit transitionEnd事件分组的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！