KeyframeEffect: thuộc tính target
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since March 2020.
Thuộc tính target của giao diện KeyframeEffect đại diện cho phần tử hoặc phần tử giả đang được hoạt hình. Có thể là null cho các hoạt hình không nhắm mục tiêu vào một phần tử cụ thể. Nó hoạt động như cả getter lẫn setter, ngoại trừ với các hoạt hình và transition được tạo bởi CSS.
Giá trị
Một Element hoặc null.
Ví dụ
Trong ví dụ sau, emoji đã được đặt làm phần tử target để hoạt hình:
js
const emoji = document.querySelector("div"); // element to animate
const rollingKeyframes = new KeyframeEffect(
emoji,
[
{ transform: "translateX(0) rotate(0)" }, // keyframe
{ transform: "translateX(200px) rotate(1.3turn)" }, // keyframe
],
{
// keyframe options
duration: 2000,
direction: "alternate",
easing: "ease-in-out",
iterations: "Infinity",
},
);
const rollingAnimation = new Animation(rollingKeyframes, document.timeline);
rollingAnimation.play();
// logs "<div>🤣</div>"
console.log(rollingKeyframes.target);
html
<div>🤣</div>
Thông số kỹ thuật
| Thông số kỹ thuật |
|---|
| Web Animations> # dom-keyframeeffect-target> |
Tương thích trình duyệt
Xem thêm
- Web Animations API
- Thuộc tính của đối tượng
KeyframeEffect.