Анимация псевдоэлемента при помощи JavaScript-библиотеки Anime.js

Каждый, кто хоть раз пытался применить анимацию к псевдоэлементу при помощи JavaScript, сталкивался с этой проблемой. Вот что об этом говорится в документации одной из популярных JavaScript-библиотек для анимации Anime.js:

Pseudo elements can’t be targeted using JavaScript.

Можно было бы на этом поставить точку и пройти мимо, но мы же не привыкли так быстро отступать.

Далее я покажу как легко обойти это ограничение и применить анимацию к любому псевдоэлементу.

Решение

1. Указываем свойства псевдоэлемента, к которым хотим применить анимацию, через CSS-переменные. В этом примере мы хотим применить анимацию к размерам псевдоэлемента :after, например, плавно увеличить и уменьшить его:

/* css */
#element {
  --size: 3rem;
}

#element::after {
  width: var(--size);
  height: var(--size);
}

2. Добавляем в проект JavaScript-библиотеку для анимации Anime.js:

# terminal
npm i animejs

3. Запускаем анимацию посредством плавного изменения CSS-переменной:

// js
import anime from "animejs";

const element = document.querySelector("#element");

const properties = {
  size: "3rem",
};

anime({
  targets: properties,
  size: "4rem",
  duration: 1000,
  direction: "alternate",
  easing: "linear",
  update: () => {
    element.style.setProperty("--size", properties.size);
  },
});