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过渡功能？

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