html运行实例（event_transition_elapsedtime）-搜寻教程库

代码示例：（标识：event_transition_elapsedtime）

<!DOCTYPE html>
<html>
<head>
<style> 
#myDIV {
  width: 100px;
  height: 100px;
  background: yellow;
  -webkit-transition: 2s; /* 针对 Safari 3.1 到 6.0 */
  transition: 2s;
}

#myDIV:hover {
  width: 400px;
}
</style>
</head>
<body>

<p>请将鼠标悬停在下方的 div 元素上，等待过渡效果结束。</p>

<p>elapsedTime 属性返回过渡效果已运行的秒数。</p>

<div id="myDIV"></div>

<p><b>注释：</b>本例在 Internet Explorer 9 和更早版本中不起作用。</p>

<script>
// 针对 Safari 3.1 到 6.0 的代码
document.getElementById("myDIV").addEventListener("webkitTransitionEnd", myFunction);

// 标准语法
document.getElementById("myDIV").addEventListener("transitionend", myFunction);

function myFunction(event) {
  this.innerHTML = "Transition lasted: " + event.elapsedTime + " seconds";
}
</script>

</body>
</html>