实例属性
此接口继承了其父接口 Animation 的属性。
CSSTransition.transitionProperty只读-
返回过渡的 CSS 属性名称(字符串形式)。
实例方法
此接口继承了其父接口 Animation 的方法。
没有特定的方法。
示例
检查返回的 CSSTransition
下面的示例中的过渡在悬停时改变了盒子的宽度。调用 Element.getAnimations() 返回一个包含所有 Animation 对象的数组。在我们的例子中,这返回了一个 CSSTransition 对象,代表所创建的动画。
css
.box {
background-color: #165baa;
color: white;
width: 100px;
height: 100px;
transition: width 4s;
}
.box:hover {
width: 200px;
}
js
const item = document.querySelector(".box");
item.addEventListener("transitionrun", () => {
let animations = document.querySelector(".box").getAnimations();
console.log(animations[0]);
});
规范
| 规范 |
|---|
| CSS Transitions Level 2 # the-CSSTransition-interface |
浏览器兼容性
加载中…