CSSTransition

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2020.

Giao diện CSSTransition của Web Animations API đại diện cho đối tượng Animation được sử dụng cho CSS Transition.

Thuộc tính phiên bản

Giao diện này kế thừa các thuộc tính từ lớp cha, Animation.

CSSTransition.transitionProperty Read only: Trả về tên thuộc tính CSS của transition dưới dạng chuỗi.

Phương thức phiên bản

Giao diện này kế thừa các phương thức từ lớp cha, Animation.

Không có phương thức cụ thể.

Transition trong ví dụ sau thay đổi chiều rộng của hộp khi di chuột. Gọi Element.getAnimations() trả về một mảng tất cả các đối tượng Animation. Trong trường hợp của chúng tôi, điều này trả về đối tượng CSSTransition, đại diện cho hoạt ảnh được tạo.

css

.box {
  background-color: #165baa;
  color: white;
  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]);
});