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

瀏覽器相容性