KeyframeEffect: свойство target

Базовая линия Широко доступно

Эта функция хорошо зарекомендовала себя и работает на многих устройствах и версиях браузеров. Она доступна в браузерах с марта 2020 года.

Свойство target интерфейса KeyframeEffect представляет элемент или псевдоэлемент, который анимируется. Оно может быть null для анимаций, которые не нацелены на конкретный элемент. Оно работает как геттер, так и сеттер, за исключением анимаций и переходов, сгенерированных CSS.

Значение

Элемент Element или null.

Примеры

В следующем примере, emoji задан как target элемент, который будет анимирован:

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);

<div>🤣</div>

Спецификации

Спецификация
Web Animations # dom-keyframeeffect-target

Совместимость с браузерами

	Рабочие столы					Мобильные устройства
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox для Android	Opera Android	Safari на iOS	Samsung Internet	WebView Android
`target`	75	79	63	62	13.1	75	63	54	13.4	11.0	75

См. также

API Web Animations
Свойство объектов KeyframeEffect.

© 2005–2024 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/API/KeyframeEffect/target