CSS3过渡事件 [英] CSS3 transition events

问题描述

某个元素是否有任何事件触发，以检查css3转换已经开始或结束？

Are there any events fired by an element to check wether a css3 transition has started or end?

推荐答案

W3C CSS过渡草案

W3C CSS Transitions Draft

CSS Transition的完成生成相应的DOM事件。对于经历转换的每个财产，都会触发一个事件。这允许内容开发者执行与完成转换同步的操作。

The completion of a CSS Transition generates a corresponding DOM Event. An event is fired for each property that undergoes a transition. This allows a content developer to perform actions that synchronize with the completion of a transition.

---

Webkit

---

Webkit

您可以为
转换结束时发送的DOM事件
设置一个处理程序。该事件是WebKitTransitionEvent的一个实例
，其类型为
是JavaScript中的webKitTransitionEnd。

You can set a handler for a DOM event that is sent at the end of a transition. The event is an instance of WebKitTransitionEvent and its type is webKitTransitionEnd in JavaScript.

box.addEventListener( 'webkitTransitionEnd', 
    function( event ) { alert( "Finished transition!" ); }, false );

Mozilla

Mozilla

转换完成时，单个事件触发。在Firefox中，事件是 transitionend ，在Opera中， oTransitionEnd ，而在WebKit中，它是 webkitTransitionEnd 。

There is a single event that is fired when transitions complete. In Firefox, the event is transitionend, in Opera, oTransitionEnd, and in WebKit it is webkitTransitionEnd.

Opera

Opera

有一种类型的转换事件
可用。 oTransitionEnd 事件
发生在
转换完成。

There is one type of transition event available. The oTransitionEnd event occurs at the completion of the transition.

Internet Explorer

Internet Explorer

转换完成时发生 transitionend 事件。如果过渡在完成之前被移除，事件将不会触发。

The transitionend event occurs at the completion of the transition. If the transition is removed before completion, the event will not fire.

---

SO：如何在浏览器之间规范化CSS3转换功能？

---

SO: How do I normalize CSS3 Transition functions across browsers?

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