GlobalEventHandlers.ontransitionend

这篇翻译不完整。请帮忙从英语翻译这篇文章

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的值,其在延迟结束、动画开始之时,值为零。

示例

本例中,我们使用了 transitionruntransitionend 事件来监测 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  

浏览器兼容性

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidEdge MobileFirefox for AndroidOpera for AndroidiOS SafariSamsung Internet
Basic supportChrome Full support Yes
Alternate Name
Full support Yes
Alternate Name
Alternate Name Uses the non-standard name: onwebkittransitionend
Edge ? Firefox Full support 51IE ? Opera ? Safari Full support YesWebView Android Full support Yes
Alternate Name
Full support Yes
Alternate Name
Alternate Name Uses the non-standard name: onwebkittransitionend
Chrome Android Full support Yes
Alternate Name
Full support Yes
Alternate Name
Alternate Name Uses the non-standard name: onwebkittransitionend
Edge Mobile ? Firefox Android Full support 51Opera Android ? Safari iOS Full support YesSamsung Internet Android ?

Legend

Full support  
Full support
Compatibility unknown  
Compatibility unknown
Uses a non-standard name.
Uses a non-standard name.

另见

文档标签和贡献者

此页面的贡献者: Hopsken
最后编辑者: Hopsken,