CSSTransition: transitionProperty property
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.
Thuộc tính transitionProperty của giao diện CSSTransition trả về tên thuộc tính CSS transition đã được mở rộng của transition. Đây là thuộc tính CSS dạng đầy đủ mà transition được tạo ra cho nó.
Giá trị
Một chuỗi.
Ví dụ
Trả về transitionProperty
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. Thuộc tính transitionProperty trả về thuộc tính mà transition được tạo ra cho nó, là width.
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].propertyName);
});
Thông số kỹ thuật
| Specification |
|---|
| CSS Transitions Module Level 2 # dom-csstransition-transitionproperty |