CSS3 过渡事件 [英] CSS3 transition events

问题描述

元素是否会触发任何事件来检查 css3 过渡是否已开始或结束?

解决方案

W3C CSS 转换草案

<块引用>

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

<小时>

Webkit

<块引用>

要确定转换何时完成，请为转换结束时发送的 DOM 事件设置 JavaScript 事件侦听器函数.该事件是 WebKitTransitionEvent 的一个实例，其类型为 webkitTransitionEnd.

box.addEventListener( 'webkitTransitionEnd',函数(事件){警报(完成转换！")；}， 错误的 );

Mozilla

<块引用>

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

歌剧

<块引用>

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

Internet Explorer

<块引用>

transitionend 事件在转换完成时发生.如果在完成之前移除转换，则不会触发该事件.

<小时>

堆栈溢出:如何标准化 CSS3 Transition 函数浏览器?

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

解决方案

W3C CSS Transitions Draft

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

To determine when a transition completes, set a JavaScript event listener function for the DOM event that is sent at the end of a transition. The event is an instance of WebKitTransitionEvent, and its type is webkitTransitionEnd.

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

Mozilla

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

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

Internet Explorer

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

---

Stack Overflow: How do I normalize CSS3 Transition functions across browsers?

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