ontransitioncancel属性

transitioncancel事件的事件处理程序。该事件在CSS转换被取消时发送。

在以下情况下，转换被取消：

• 适用于目标的transition-property属性值将更改
• 该display属性设置为"none"。
• 转换在运行完成之前停止，例如通过将鼠标移出悬停转换元素。

ontransitioncancel属性语法

var transitionCancelHandler = target.ontransitioncancel;

target.ontransitioncancel = Function

ontransitioncancel属性值

当被调用transitioncancel事件发生时要调用的Function，指示在target对象上已取消了 CSS 转换，其中，所述target对象是一个HTML元素（HTMLElement），文件（Document），或窗口（Window）。该函数接收作为输入的单个参数：描述发生的事件的TransitionEvent对象；事件的TransitionEvent.elapsedTime属性值应该与transition-duration的值相同。

注意：elapsedTime不包括过渡效果开始之前的时间；这意味着该transition-delay值不会影响该elapsedTime值，直到延迟周期结束并且动画开始，该值才为零。

ontransitioncancel属性示例

在本例中，我们使用transitionrun和transitionend事件来检测转换何时开始和结束，以便在转换期间发生文本更新。这也可以用来触发动画或其他效果，以允许链接反应。

另外，我们还使用一个click事件使框消失（display: none;），显示它如何触发transitioncancel事件触发。

HTML内容

这只是简单地创建一个<div>，我们将用下面的CSS样式来制作一个调整大小和改变颜色等的框。

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

CSS内容

下面的CSS对框进行样式设置，并应用转换效果，使框的颜色和大小发生变化，并使框旋转，同时鼠标光标悬停在该框上。

.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内容

接下来，我们需要建立事件处理程序，以便在过渡开始和结束时更改框的文本内容。

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.');
}

当您运行代码时应该注意将鼠标光标悬停在框上时会发生什么，然后将其移开。

还请注意当您单击该框时出现在JavaScript控制台中的日志，或者在转换运行完成之前将光标移开。

规范

浏览器兼容性

我们正在将兼容性数据转换为机器可读的JSON格式。

• 电脑端

• 移动端