Настройка анимаций

Unpoly предоставляет гибкий механизм управления анимациями переходов между страницами и элементами интерфейса. Анимации помогают сделать интерфейс более плавным, улучшить восприятие динамических изменений и избежать резких перепрыгиваний контента. В Unpoly анимации настраиваются через классы CSS, параметры JavaScript и глобальные настройки библиотеки.

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

Unpoly различает несколько основных типов анимаций:

  1. Анимация замены фрагмента (replace) Используется при замене содержимого элемента новым фрагментом с сервера. Классическая задача — обновление части страницы без перезагрузки.

  2. Анимация вставки (insert) Применяется, когда новый фрагмент добавляется к существующему содержимому. Поддерживает плавное появление новых элементов.

  3. Анимация удаления (remove) Управляет плавным исчезновением элементов из DOM.

  4. Анимация навигации (overlay или modal) Отдельный вид анимации для всплывающих окон и оверлеев, с возможностью затемнения фона и плавного появления модального окна.

CSS-классы для анимации

Unpoly использует набор предопределённых CSS-классов, которые применяются к элементам при различных этапах анимации:

  • .up-enter — класс, добавляемый к элементу перед началом анимации появления.
  • .up-enter-active — класс, активный в течение всей анимации появления.
  • .up-leave — класс для элемента перед началом анимации исчезновения.
  • .up-leave-active — активный класс на время анимации удаления.

Эти классы можно переопределять в CSS, используя любые свойства, поддерживающие плавные переходы (transition) или ключевые кадры (@keyframes). Например:

.up-enter {
  opacity: 0;
  transform: translateY(-10px);
}
.up-enter-active {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.3s ease, transform 0.3s ease;
}
.up-leave {
  opacity: 1;
}
.up-leave-active {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.3s ease, transform 0.3s ease;
}

Настройка анимаций через JavaScript

Unpoly позволяет задавать анимации динамически с помощью опций в методах up.replace, up.insert и других:

up.replace('#content', '/new_fragment', {
  animation: 'fade',   // встроенная анимация
  duration: 400,       // длительность в миллисекундах
  easing: 'ease-in-out' // функция временной кривой
});

Ключевые параметры:

  • animation — название анимации. Можно использовать встроенные (fade, slide, overlay) или собственные, зарегистрированные через CSS-классы.
  • duration — продолжительность анимации в миллисекундах. По умолчанию 300 мс.
  • easing — кривые анимации (linear, ease-in, ease-out, ease-in-out) для плавного контроля ускорения.

Глобальная конфигурация анимаций

Unpoly позволяет задавать глобальные настройки, чтобы единообразно применять анимации по всей странице:

up.options.animation = 'fade';
up.options.duration = 350;
up.options.easing = 'ease-in-out';

Эти параметры применяются ко всем переходам, если локально не переопределены.

Дополнительно можно настроить поведение для отдельных типов действий:

up.options.animation = {
  replace: 'slide-left',
  insert: 'fade',
  remove: 'fade-out'
};

Такое разделение позволяет, например, слайдить при смене страниц, плавно вставлять новые элементы и исчезать старым без конфликта стилей.

События анимации

Unpoly предоставляет события жизненного цикла анимаций, которые позволяют выполнять действия до, во время и после анимации:

  • up:animating — срабатывает в начале анимации.
  • up:animation:end — срабатывает после завершения анимации.
  • up:animation:cancel — срабатывает при отмене анимации.

Пример использования:

up.on('up:animation:end', function(event) {
  console.log('Анимация завершена для', event.target);
});

Эти события полезны для синхронизации других эффектов, загрузки данных или повторной инициализации скриптов внутри обновлённого фрагмента.

Создание собственных анимаций

  1. Определить CSS-классы с анимациями для enter и leave.
  2. Зарегистрировать анимацию в Unpoly, если необходимо использовать название в опциях:
up.animation('custom-fade', {
  enter: 'custom-enter',
  leave: 'custom-leave'
});
  1. Использовать её в up.replace, up.insert или глобально.
up.replace('#content', '/new_fragment', {
  animation: 'custom-fade'
});

Такой подход позволяет полностью контролировать визуальные эффекты и интегрировать сложные переходы, включая параллакс, трансформации, масштабирование и анимацию цвета.

Советы по оптимизации

  • Использовать transform и opacity вместо height или width для плавных GPU-ускоренных анимаций.
  • Минимизировать сложные анимации при частой замене фрагментов, чтобы не перегружать браузер.
  • Проверять совместимость с мобильными устройствами: слишком длинные анимации могут замедлять отклик интерфейса.
  • Использовать события up:animation:end для повторной инициализации интерактивных элементов, таких как кнопки, вкладки или слайдеры.

Unpoly обеспечивает полный контроль над анимациями на уровне CSS и JavaScript, позволяя создавать современные, отзывчивые интерфейсы с плавными переходами и высокой отзывчивостью.

Оглавление