CSSTransition

Baseline 已广泛支持

此特性已经十分成熟,可在许多设备和浏览器版本上使用。自 2020 年 7 月以来,它已在各大浏览器中可用。

Web Animations API 的 CSSTransition 接口代表一个用于 CSS 过渡Animation 对象。

EventTarget Animation CSSTransition

实例属性

此接口继承了其父接口 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

浏览器兼容性