HTML | DOM TransitionEvent elapsedTime 属性

TransitionEvent 接口的 elapsedTime 属性，返回当前动画已经经过的时间，以秒为单位。

语法

var elapsedTime = transitionEvent.elapsedTime;

属性值

• elapsedTime：返回动画已经经过的时间，以秒为单位。

示例

// HTML
<div id="myDiv"></div>

// CSS
#myDiv {
  width: 50px;
  height: 50px;
  background-color: red;
  transition: width 2s ease-in-out;
}

// JavaScript
var div = document.getElementById("myDiv");
div.addEventListener("transitionend", function(event) {
  console.log(event.elapsedTime); // 输出当前动画已经经过的时间
});

说明

elapsedTime 属性只在 transitionend 事件中可用。当 transition 完成（即CSS transition结束）时，该事件被触发，并且 elapsedTime 属性将返回 transition 已经运行的时间。如果 transition 还没有开始，elapsedTime 属性将返回 0。

参考链接

• MDN web docs：TransitionEvent.elapsedTime