window属性:ontransitionend

2018-06-02 11:13 更新

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

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

规范

规范状态注释
CSS转换
该规范中'ontransitionend'的定义。
工作草案 

浏览器兼容性

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

  • 电脑端
特征Chrome
Firefox(Gecko)
Microsoft EdgeInternet Explorer
Opera
Safari(WebKit)
基本支持支持[1]支持:51不支持[2]不支持[2]支持
  • 移动端
特征AndroidAndroid WebviewFirefox Mobile (Gecko)Firefox OSIE MobileOpera MobileSafari MobileChrome for Android
基本支持??支持:51.0???支持支持[1]

注释:

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

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

以上内容是否对您有帮助:
在线笔记
App下载
App下载

扫描二维码

下载编程狮App

公众号
微信公众号

编程狮公众号