Webkit transitionEnd事件分组

本文介绍了Webkit transitionEnd事件分组的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述

我有一个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.