E2E-тестирование анимаций

Для начала работы с библиотекой AOS необходимо подключить её CSS и JS-файлы. Наиболее распространённый способ — использовать CDN:

<link href="https://cdn.jsdelivr.net/npm/aos@2.3.4/dist/aos.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/aos@2.3.4/dist/aos.js"></script>

После подключения файлов инициализация происходит через вызов метода AOS.init() в Jav * aScript:

document.addEventListener('DOMContentLoaded', () => {
    AOS.init({
        duration: 1200, // продолжительность анимации в миллисекундах
        once: true,     // анимация срабатывает только один раз
        mirror: false   // повторная анимация при скролле вверх
    });
});

Параметры инициализации позволяют гибко управлять поведением анимаций по всей странице.

Атрибуты для элементов

AOS использует HTML-атрибуты data-aos для назначения анимаций конкретным элементам. Основные атрибуты:

  • data-aos — определяет тип анимации (fade, slide, zoom и др.)
  • data-aos-duration — задаёт индивидуальную продолжительность анимации
  • data-aos-delay — задержка перед началом анимации
  • data-aos-offset — смещение триггера относительно верхней границы окна
  • data-aos-easing — тип функции сглаживания (ease, linear, ease-in-out и др.)
  • data-aos-once — анимация срабатывает один раз (true/false)

Пример:

<div data-aos="fade-up" data-aos-duration="1500" data-aos-delay="300">
    Появление элемента с эффектом fade-up
</div>

Типы анимаций

Библиотека поддерживает большое количество предустановленных анимаций. К ключевым относятся:

  • fade: плавное появление (fade, fade-up, fade-down, fade-left, fade-right)
  • slide: сдвиг элемента (slide-up, slide-down, slide-left, slide-right)
  • zoom: увеличение или уменьшение (zoom-in, zoom-out, zoom-in-up, zoom-in-down)
  • flip: вращение по оси (flip-left, flip-right, flip-up, flip-down)
  • custom: комбинации выше через CSS классы и кастомизацию

Каждый тип анимации имеет свои особенности и может быть настроен через атрибуты.

Продвинутая конфигурация

AOS позволяет управлять поведением анимаций на уровне страницы и отдельных элементов. Основные свойства конфигурации:

  • duration — глобальная продолжительность всех анимаций
  • delay — глобальная задержка
  • offset — глобальное смещение триггера
  • easing — функция сглаживания
  • once — повторная анимация при повторном скролле
  • mirror — зеркалирование анимаций при обратном скролле
  • anchorPlacement — положение точки отслеживания анимации относительно элемента (top-bottom, center-center и др.)

Пример инициализации с комплексными параметрами:

AOS.init({
    duration: 1000,
    delay: 200,
    offset: 120,
    easing: 'ease-in-out',
    once: false,
    mirror: true,
    anchorPlacement: 'top-bottom'
});

Интеграция с динамическим контентом

Для контента, который подгружается динамически (через AJAX, React или Vue), важно обновлять AOS после вставки элементов:

// Подгрузка новых элементов
const container = document.querySelector('#dynamic-content');
container.innerHTML += '<div data-aos="fade-left">Новый элемент</div>';

// Обновление AOS
AOS.refresh();

Метод AOS.refresh() пересчитывает позиции и пересобирает триггеры анимации, обеспечивая корректное отображение динамических блоков.

Тестирование анимаций E2E

Для полноценного E2E-тестирования анимаций важно проверять не только наличие элементов, но и факт их анимационного перехода при скролле.

Проверка появления элементов

Используется проверка классов и стилей:

// Cypress пример
cy.get('[data-aos="fade-up"]').scrollIntoView()
  .should('have.class', 'aos-animate');

Эта проверка подтверждает, что элемент получил класс aos-animate, сигнализирующий о начале анимации.

Проверка временных параметров

Можно валидировать transition-duration и transition-delay через CSS-свойства:

cy.get('[data-aos="fade-up"]').should(($el) => {
    const duration = parseFloat($el.css('transition-duration')) * 1000;
    expect(duration).to.eq(1200);
});

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

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

cy.get('[data-aos]').each(($el, index) => {
    const delay = parseInt($el.attr('data-aos-delay')) || 0;
    // Проверка, что delay увеличивается для последовательности
});

Интеграция с визуальными тестами

Для полного контроля можно использовать скриншотное сравнение (Percy, BackstopJS) или библиотеку Cypress Visual Testing для фиксирования состояния до и после анимации.

Работа с нестандартными анимациями

Библиотека позволяет подключать собственные CSS-анимации через кастомные классы:

.my-fade-scale {
    opacity: 0;
    transform: scale(0.5);
    transition: all 0.8s ease-in-out;
}
.my-fade-scale.aos-animate {
    opacity: 1;
    transform: scale(1);
}

Применение:

<div data-aos class="my-fade-scale">Кастомная анимация</div>

Это даёт полный контроль над поведением и стилистикой анимаций без ограничений стандартного набора AOS.

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

Для больших страниц с множеством анимируемых элементов:

  • Использовать once: true для сокращения повторных анимаций
  • Минимизировать количество одновременно анимируемых элементов
  • Разбивать тяжелые блоки на лениво подгружаемые секции
  • Избегать сложных трансформаций и box-shadow для множества элементов одновременно

Эти меры снижают нагрузку на рендер и предотвращают «подёргивания» при скролле.

Работа с реактивными фреймворками

В Vue или React необходимо учитывать фазу монтирования компонентов:

// React пример
import { useEffect } from 'react';
import AOS from 'aos';
import 'aos/dist/aos.css';

function AnimatedComponent() {
    useEffect(() => {
        AOS.init({ duration: 800 });
        AOS.refresh();
    }, []);

    return <div data-aos="fade-right">React элемент</div>;
}

Каждый новый рендер должен вызывать AOS.refresh(), чтобы анимация корректно применялась к динамически созданным элементам.

Этот набор знаний позволяет не только внедрять AOS на страницу, но и системно тестировать, отлаживать и оптимизировать анимации, обеспечивая стабильное и предсказуемое поведение при скролле и динамических изменениях DOM.

Оглавление