Целевые элементы и селекторы

Работа с анимациями в anime.js начинается с определения целевых элементов (targets). Именно к ним будут применяться анимационные свойства: изменение положения, прозрачности, масштаба и других параметров.

В библиотеке используется универсальное поле targets, которое принимает различные типы значений:

  • CSS-селекторы
  • DOM-элементы
  • массивы элементов
  • NodeList
  • объекты JavaScript

Простейший пример:

anime({
  targets: '.box',
  translateX: 250
});

В данном случае селектор .box выбирает все элементы с соответствующим классом.

CSS-селекторы

anime.js поддерживает все стандартные CSS-селекторы, что делает выбор элементов гибким и мощным.

Классы

anime({
  targets: '.item',
  opacity: [0, 1]
});

Анимируются все элементы с классом item.

Идентификаторы

anime({
  targets: '#logo',
  rotate: 360
});

Применяется к элементу с уникальным id="logo".

Вложенные селекторы

anime({
  targets: '.container .item',
  scale: 1.5
});

Выбираются все .item, находящиеся внутри .container.

Групповые селекторы

anime({
  targets: '.box, .circle',
  translateY: 100
});

Анимация применяется сразу к нескольким типам элементов.

DOM-элементы как targets

Вместо строковых селекторов можно передавать реальные DOM-узлы:

const element = document.querySelector('.box');

anime({
  targets: element,
  scale: 2
});

Это удобно, если элемент уже найден и не требуется повторный поиск.

NodeList и HTMLCollection

Методы вроде querySelectorAll возвращают коллекции элементов:

const elements = document.querySelectorAll('.item');

anime({
  targets: elements,
  translateX: 200
});

anime.js автоматически обрабатывает такие коллекции.

Массивы элементов

Можно комбинировать разные элементы в одном массиве:

const el1 = document.querySelector('.box');
const el2 = document.querySelector('.circle');

anime({
  targets: [el1, el2],
  rotate: 180
});

Также допускается смешивание типов:

anime({
  targets: ['.box', document.querySelector('#logo')],
  scale: 1.2
});

Объекты JavaScript

anime.js способен анимировать не только DOM, но и обычные объекты:

const obj = { value: 0 };

anime({
  targets: obj,
  value: 100,
  round: 1,
  update: () => {
    console.log(obj.value);
  }
});

Это используется для создания кастомных анимаций, синхронизации данных или построения сложной логики.

Функциональные селекторы

В targets можно передавать функцию, возвращающую элементы:

anime({
  targets: () => document.querySelectorAll('.dynamic'),
  translateX: 150
});

Функция вызывается в момент запуска анимации, что полезно при динамически изменяемом DOM.

Фильтрация элементов

anime.js позволяет дополнительно фильтровать выбранные элементы с помощью Jav * aScript:

const elements = Array.from(document.querySelectorAll('.item'))
  .filter(el => el.dataset.active === 'true');

anime({
  targets: elements,
  opacity: 1
});

Индексация элементов

Каждый элемент в списке получает индекс, который можно использовать для создания сложных эффектов:

anime({
  targets: '.item',
  translateX: (el, i) => i * 50
});
  • el — текущий элемент
  • i — индекс элемента

Это позволяет задавать разные значения для каждого элемента.

Использование dataset и атрибутов

Целевые элементы можно выбирать на основе атрибутов:

anime({
  targets: '[data-animate="true"]',
  scale: 1.3
});

Или комбинировать:

anime({
  targets: '.item[data-type="primary"]',
  translateY: 80
});

Живые и статические коллекции

Важно учитывать различие между:

  • NodeList (статический) — querySelectorAll
  • HTMLCollection (живой) — getElementsByClassName

anime.js корректно работает с обоими, но:

  • статические коллекции фиксируются на момент выборки
  • живые автоматически обновляются при изменении DOM

Динамическое добавление элементов

Если элементы добавляются после инициализации, стандартный селектор их не захватит:

anime({
  targets: '.item',
  translateX: 100
});

Решения:

  1. Перезапуск анимации
  2. Использование функции в targets
  3. Ручное обновление списка

Пример с функцией:

anime({
  targets: () => document.querySelectorAll('.item'),
  translateX: 100
});

Работа с SVG-элементами

anime.js одинаково работает с HTML и SVG:

anime({
  targets: 'svg circle',
  r: 50
});

Можно анимировать:

  • атрибуты (cx, cy, r)
  • transform
  • opacity

Специальные случаи: window и document

Анимация может применяться к глобальным объектам:

anime({
  targets: document.documentElement,
  scrollTop: 500,
  duration: 1000,
  easing: 'easeInOutQuad'
});

Комбинирование нескольких подходов

В одном targets допустимо сочетание различных способов:

anime({
  targets: [
    '.box',
    document.querySelector('#circle'),
    ...document.querySelectorAll('.item')
  ],
  scale: 1.5
});

Такой подход позволяет централизованно управлять сложными сценами.

Производительность и оптимизация

При работе с большим количеством элементов важно учитывать:

  • избегать повторных querySelectorAll внутри анимаций
  • кешировать DOM-элементы
  • использовать массивы вместо повторных селекторов

Пример оптимизации:

const items = document.querySelectorAll('.item');

anime({
  targets: items,
  translateX: 100
});

Частые ошибки

1. Неверный селектор

targets: 'box' // ошибка, отсутствует точка

Правильно:

targets: '.box'

2. Пустой результат выборки

Если селектор не находит элементов, анимация не выполнится.

3. Передача null

targets: document.querySelector('.unknown') // null

Итоговые особенности targets

  • универсальность — поддержка различных типов данных
  • интеграция с DOM и JS-объектами
  • гибкость за счёт функций и массивов
  • возможность динамического формирования списка элементов

Корректный выбор целевых элементов является фундаментом для построения сложных и производительных анимаций в anime.js.

Оглавление