AnimationEvent animationName 属性
JavaScript基础 2022-06-08 12:04:01小码哥的IT人生shichen
AnimationEvent animationName 属性
实例
获取与动画关联的动画名称：
var x = document.getElementById("myDIV");
x.addEventListener("animationstart", myStartFunction);
function myStartFunction(event) {
this.innerHTML = "Animation-name is: " + event.animationName;
}
完整实例：
<!DOCTYPE html>
<html>
<head>
<style>
#myDIV {
margin: 25px;
width: 550px;
height: 100px;
background: orange;
position: relative;
font-size: 25px;
-webkit-animation-name: mymove; /* Chrome, Safari, Opera */
-webkit-animation-duration: 5s; /* Chrome, Safari, Opera */
animation-name: mymove;
animation-duration: 5s;
}
/* Chrome, Safari, Opera */
@-webkit-keyframes mymove {
from {top: 0px;}
to {top: 200px;}
}
@keyframes mymove {
from {top: 0px;}
to {top: 200px;}
}
</style>
</head>
<body>
<p>本例使用 addEventListener() 方法将 "animationstart" 事件附加到 DIV 元素。</p>
<p>animationName 属性返回此动画中使用的动画名称：</p>
<p><b>注释：</b>IE9 及更早版本不支持 animationName 属性。</p>
<div id="myDIV"></div>
<script>
var x = document.getElementById("myDIV");
// 针对 Chrome、Safari 和 Opera 的代码
x.addEventListener("webkitAnimationStart", myStartFunction);
// 标准语法
x.addEventListener("animationstart", myStartFunction);
function myStartFunction(event) {
this.innerHTML = "The animation-name is: " + event.animationName;
}
</script>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
浏览器支持
表中的数字注明了完全支持该属性的首个浏览器版本。
| 属性 | Chrome | IE | Firefox | Safari | Opera |
|---|---|---|---|---|---|
| animationName | 支持 | 10.0 | 6.0 | 支持 | 支持 |
语法
event.animationName技术细节
| 返回值： | 字符串值，表示动画的名称。 |
|---|
