CSSTransition - 表示用于 CSS 过渡 的 Animation 对象

这是一个实验中的功能
此功能某些浏览器尚在开发中，请参考浏览器兼容性表格以得到在不同浏览器中适合使用的前缀。由于该功能对应的标准文档可能被重新修订，所以在未来版本的浏览器中该功能的语法和行为可能随之改变。

CSSTransition 是 Web Animations API 的接口，表示用于 CSS 过渡 的 Animation 对象。

属性

从其祖先接口 Animation 继承了属性。

CSSTransition.transitionProperty 只读

以 CSSOMString 形式返回过渡 CSS 属性名称。

事件处理程序

没有特有的事件处理程序；从其祖先接口 Animation 继承了事件处理程序。

方法

没有特有的方法；从其祖先接口 Animation 继承了方法。

实例

检查返回的 CSSTransition

以下实例中的过渡在悬停时更改盒子的宽度。调用 Element.getAnimations() 返回一个包含所有 Animation 对象的数组。在我们的例子中，它返回一个 CSSTransition 对象，表示创建的动画。

.box {
  background-color: #165baa;
  color: #fff;
  width: 100px;
  height: 100px;
  transition: width 4s;
}

.box:hover {
  width: 200px;
}

const item = document.querySelector(".box");
item.addEventListener('transitionrun', () => {
  let animations = document.querySelector(".box").getAnimations();
  console.log(animations[0]);
});

规范

规范 状态 备注
CSS Transitions Level 2
CSSTransition 的定义		 编者的草案 初始定义。

桌面浏览器兼容性

暂无兼容数据