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