GlobalEventHandlers混合 的 ontransitioncancel  属性 是处理 transitioncancel 事件的手柄event handler.

domxref("GlobalEventHandlers") 与 event("Event_handlers", "event handler"): dom修订版本的事件手柄。



  • 应用于目标的transition-property属性的值被更改
  • display属性被设置为"none"。
  • 转换在运行到完成之前就停止了,例如通过将鼠标移出悬浮过渡元素。


var transitionCancelHandler = target.ontransitioncancel;

target.ontransitioncancel = Function


A Function 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 (en-US) property's value should be the same as the value of transition-duration.

Note: elapsedTime不包括过渡效果开始之前的时间;这意味着transition-delay的值不会影响elapsedTime的值,elapsedTime在延迟周期结束和动画开始之前都是0。


在本例中,我们使用transitionruntransitionend (en-US)事件来检测转换何时开始和结束,从而导致在转换期间发生文本更新。这也可以用来触发动画或其他效果,以允许连锁反应。

除此之外, 我们也使用 click (en-US) 事件使盒子消失 (display: none;), 显示如何触发 transitioncancel 事件.

HTML content


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

CSS content


.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 content

然后, 我们需要建立事件处理程序,以便在转换开始和结束时更改框的文本内容。

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

box.ontransitionend = function(event) {
  box.innerHTML = "Done!";

box.onclick = function() { = 'none';
  timeout = window.setTimeout(appear, 2000);
  function appear() { = '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.


Specification Status Comment
CSS Transitions
Working Draft

Browser compatibility

BCD tables only load in the browser

See also