ontransitionend属性

transitionend事件的事件处理程序。此事件在CSS转换完成时发送到。

如果在转换完成执行之前从其目标节点删除转换，则不会生成该transitionend事件。一种可能发生的方式是改变适用于目标的transition-property属性值。另一种情况是，display属性设置为"none"。

ontransitionend属性语法

var transitionEndHandler = target.ontransitionend;

target.ontransitionend = Function

ontransitionend属性值

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

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

ontransitionend属性示例

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

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!";
}

注意将鼠标光标悬停在框上时会发生什么，然后将其移开。

规范

浏览器兼容性

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

• 电脑端

• 移动端

注释：

[1] Chrome调用onwebkittransitionend事件处理程序，事件的前缀为webkittransitionend。

[2]这个事件处理程序的HTML属性不可用，但可以用addEventListener()函数来监听transitionend事件。