在此页

• 句法
• 范例
• 规范
• 浏览器兼容性
• 另请参阅
• 相关话题

ontransitionend 特性为 GlobalEventHandlers 混合 EventHandler 处理 transitionend 事件。

transitionend event is sent to when a CSS transition completes.

If the transition is removed from its target node before the transition completes execution, the transitionend event won't be generated. One way this can happen is by changing the value of the transition-property attribute which applies to the target. Another is if the display attribute is set to none .

句法

var transitionEndHandler = target.ontransitionend;
target.ontransitionend = Function
					

值

A 函数 to be called when a transitionend event occurs indicating that a CSS transition has completed on the target , where the target object is an HTML element ( HTMLElement ), document ( Document ), or window ( Window ). The function receives as input a single parameter: a TransitionEvent object describing the event which occurred; the event's TransitionEvent.elapsedTime property's value should be the same as the value of transition-duration .

elapsedTime does not include time prior to the transition effect beginning; that means that the value of transition-delay doesn't affect the value of elapsedTime , which is zero until the delay period ends and the animation begins.

范例

In this example, we use the transitionrun and transitionend events to detect when the transition begins and ends, to cause a text update to occur during the transition. This could also be used to trigger animations or other effects, to allow chaining of reactions.

HTML

This simply creates a <div> which we'll style with CSS below to make into a box that resizes and changes color and such.

<div class="box"></div>
					

CSS

The CSS below styles the box and applies a transition effect which makes the box's color and size change, and causes the box to rotate, while the mouse cursor hovers over it.

.box {
  margin-left: 70px;
  margin-top: 30px;
  border-style: solid;
  border-width: 1px;
  display: block;
  width: 100px;
  height: 100px;
  background-color: #0000FF;
  color: #FFFFFF;
  padding: 20px;
  font: bold 1.6em "Helvetica", "Arial", sans-serif;
  transition: width 2s, height 2s, background-color 2s, transform 2s, color 2s;
}
.box:hover {
  background-color: #FFCCCC;
  color: #000000;
  width: 200px;
  height: 200px;
  transform: rotate(180deg);
}
					

JavaScript

Next, we need to establish our event handlers to change the text content of the box when the transition begins and ends.

let box = document.querySelector(".box");
box.ontransitionrun = function(event) {
  box.innerHTML = "Zooming...";
}
box.ontransitionend = function(event) {
  box.innerHTML = "Done!";
}
					

结果

The resulting content looks like this:

Notice what happens when you hover your mouse cursor over the box, then move it away.

规范

规范	状态	注释
CSS Transitions The definition of 'ontransitionend' in that specification.	工作草案

浏览器兼容性

The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. 更新 GitHub 上的兼容性数据

	桌面						移动
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Android webview	Chrome for Android	Firefox for Android	Opera for Android	Safari on iOS	Samsung Internet
ontransitionend	Chrome Yes Alternate Name Yes Alternate Name Alternate Name Uses the non-standard name: onwebkittransitionend	Edge ≤79 Alternate Name ≤79 Alternate Name Alternate Name Uses the non-standard name: onwebkittransitionend	Firefox 51	IE ?	Opera ?	Safari Yes	WebView Android Yes Alternate Name Yes Alternate Name Alternate Name Uses the non-standard name: onwebkittransitionend	Chrome Android Yes Alternate Name Yes Alternate Name Alternate Name Uses the non-standard name: onwebkittransitionend	Firefox Android 51	Opera Android ?	Safari iOS Yes	Samsung Internet Android Yes Alternate Name Yes Alternate Name Alternate Name Uses the non-standard name: onwebkittransitionend

图例

完整支持

完整支持

兼容性未知 ?

兼容性未知

使用非标名称。

另请参阅

• transitionend event this event handler is triggered by
• TransitionEvent
• transitionrun event, which occurs when the transition begins

元数据

• 最后修改： Aug 12, 2020

相关话题

1. GlobalEventHandlers
2. 特性

   1. onabort
   2. onanimationcancel
   3. onanimationend
   4. onanimationiteration
   5. onauxclick
   6. onblur
   7. oncancel
   8. oncanplay
   9. oncanplaythrough
   10. onchange
   11. onclick
   12. onclose
   13. oncontextmenu
   14. oncuechange
   15. ondblclick
   16. ondurationchange
   17. onended
   18. onerror
   19. onfocus
   20. onformdata
   21. ongotpointercapture
   22. oninput
   23. oninvalid
   24. onkeydown
   25. onkeypress
   26. onkeyup
   27. onload
   28. onloadeddata
   29. onloadedmetadata
   30. onloadend
   31. onloadstart
   32. onlostpointercapture
   33. onmousedown
   34. onmouseenter
   35. onmouseleave
   36. onmousemove
   37. onmouseout
   38. onmouseover
   39. onmouseup
   40. onpause
   41. onplay
   42. onplaying
   43. onpointercancel
   44. onpointerdown
   45. onpointerenter
   46. onpointerleave
   47. onpointermove
   48. onpointerout
   49. onpointerover
   50. onpointerup
   51. onreset
   52. onresize
   53. onscroll
   54. onselect
   55. onselectionchange
   56. onselectstart
   57. onsubmit
   58. ontouchcancel
   59. ontouchstart
   60. ontransitioncancel
   61. ontransitionend
   62. onwheel
3. 实现通过：

   1. Document
   2. HTMLElement
   3. SVGElement
   4. Window
   5. XULElement