GlobalEventHandlers.ontransitionend - Web API 接口参考 编辑

transitionend 事件的事件处理函数，在某个 CSS transition 完成时触发。

如果在 transition 完成前，该 transition 已从目标节点上移除，那么 transitionend 将不会被触发。一种可能的情况是修改了目标节点的 transition-property 属性，另一种可能的情况是 display 属性被设为 "none"。

语法

var transitionEndHandler = target.ontransitionend;

target.ontransitionend = Function

值

一个 Function，该函数会在 transitionend 事件发生时被触发，表示目标节点的 CSS transition 已经完成。目标节点可能是一个 HTML 元素 (HTMLElement)，document (Document)，或者 window (Window)。该函数接受一个参数：一个描述该事件的 TransitionEvent 对象；其 TransitionEvent.elapsedTime 属性值与 transition-duration 的值一致。

elapsedTime 并不包括 transition 效果开始前的时间，也就是说，transition-delay 属性并不会影响 elapsedTime的值，其在延迟结束、动画开始之时，值为零。

示例

本例中，我们使用了 transitionrun 和 transitionend 事件来监测 transition 的开始和结束，从而在 transition 的过程中更新文本。这也可以被用来触发动画或者其它效果来实现连锁反应。

HTML 内容

这里简单地创建了一个 <div>，我们将使用 CSS 来改变其大小和颜色。

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

CSS 内容

以下为 CSS 样式，并添加了 transition 属性。当鼠标悬浮时，盒子大小和颜色会发生变化，而且还会转动。

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

接下来，我们需要事件处理函数以在 transition 发生和结束时修改文本内容。

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

效果

最后的效果如下：

注意观察当鼠标悬浮在元素上以及移出时发生的变化。

规范

Specification	Status	Comment
CSS Transitions ontransitionend	Working Draft

浏览器兼容性

BCD tables only load in the browser

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.

另见

• 触发此事件处理函数的 transitionend 事件。
• TransitionEvent
• 在transition 开始时触发的 transitionrun 事件。