在此页

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

ontransitioncancel 特性为 GlobalEventHandlers 混合 EventHandler 处理 transitioncancel 事件。

transitioncancel event is sent when a CSS transition is cancelled. The transition is cancelled when:

• 值对于 transition-property property that applies to the target is changed
• display property is set to "none" .
• The transition is stopped before it has run to completion, e.g. by moving the mouse off a hover-transitioning element.

句法

var transitionCancelHandler = target.ontransitioncancel;
target.ontransitioncancel = Function
					

值

A 函数 to be called when a transitioncancel event occurs indicating that a CSS transition has been cancelled 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.

In addition, we also use a click event to make the box dissappear ( display: none; ), showing how it triggers the transitioncancel event to fire.

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;
  -webkit-transition: width 2s, height 2s, background-color 2s, -webkit-transform 2s, color 2s;
  transition: width 2s, height 2s, background-color 2s, transform 2s, color 2s;
}
.box:hover {
  background-color: #FFCCCC;
  color: #000000;
  width: 200px;
  height: 200px;
  -webkit-transform: rotate(180deg);
  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!";
}
box.onclick = function() {
  box.style.display = 'none';
  timeout = window.setTimeout(appear, 2000);
  function appear() {
    box.style.display = 'block';
  }
}
box.ontransitioncancel = function(event) {
  console.log('transitioncancel fired after ' + event.elapsedTime + ' seconds.');
}
					

结果

The resulting content looks like this:

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

Also note the log that appears in the JavaScript console when you click the box, or move the cursor away before the transition has run to completion.

规范

规范	状态	注释
CSS Transitions The definition of 'ontransitioncancel' 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
ontransitioncancel	Chrome No	Edge No	Firefox 53	IE ?	Opera ?	Safari 13.1 13.1 部分支持 12 The event handler is exposed but will not actually be called unless both the "Web Animations" and "CSS Animations via Web Animations" preferences are enabled.	WebView Android No	Chrome Android No	Firefox Android 53	Opera Android ?	Safari iOS 13.4 13.4 部分支持 12 The event handler is exposed but will not actually be called unless both the "Web Animations" and "CSS Animations via Web Animations" preferences are enabled.	Samsung Internet Android No

图例

完整支持

完整支持

不支持

不支持

兼容性未知 ?

兼容性未知

见实现注意事项。

另请参阅

• transitioncancel 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