Анимация маршрутов

В современном веб-разработке плавность переходов между страницами и компонентами играет важную роль для улучшения пользовательского опыта. Во Vue.js за маршрутизацию отвечает библиотека Vue Router, которая тесно интегрирована с системой реактивных компонентов и предоставляет возможности для реализации анимации переходов между маршрутами.

Использование компонента <transition>

Для анимации маршрутов применяется стандартный компонент <transition>, который позволяет оборачивать динамический контент и применять CSS-переходы или JavaScript-хуки при его появлении или исчезновении.

Пример базовой структуры:

<template>
  <div id="app">
    <transition name="fade" mode="out-in">
      <router-view />
    </transition>
  </div>
</template>

<style>
.fade-enter-active, .fade-leave-active {
  transition: opacity 0.5s ease;
}
.fade-enter-from, .fade-leave-to {
  opacity: 0;
}
</style>

Ключевые моменты:

  • name="fade" задаёт префикс классов для CSS-анимации.
  • mode="out-in" гарантирует, что старый компонент полностью исчезнет до появления нового, предотвращая наложение контента.
  • CSS-классы управляют состояниями появления (-enter-from, -enter-active) и исчезновения (-leave-to, -leave-active).

Динамические переходы с использованием маршрутов

Vue Router предоставляет доступ к объекту маршрута через $route, что позволяет анимировать маршруты в зависимости от направления навигации или других условий.

<template>
  <div id="app">
    <transition :name="transitionName" mode="out-in">
      <router-view />
    </transition>
  </div>
</template>

<script>
export default {
  computed: {
    transitionName() {
      const from = this.$route.meta.index || 0;
      const to = this.$route.meta.index || 0;
      return to > from ? 'slide-left' : 'slide-right';
    }
  }
}
</script>

<style>
.slide-left-enter-active, .slide-left-leave-active {
  transition: transform 0.3s ease;
}
.slide-left-enter-from {
  transform: translateX(100%);
}
.slide-left-leave-to {
  transform: translateX(-100%);
}

.slide-right-enter-active, .slide-right-leave-active {
  transition: transform 0.3s ease;
}
.slide-right-enter-from {
  transform: translateX(-100%);
}
.slide-right-leave-to {
  transform: translateX(100%);
}
</style>

Особенности подхода:

  • Использование мета-полей маршрутов (meta.index) позволяет задать логическую последовательность страниц.
  • Динамическая смена имени перехода (transitionName) обеспечивает разные эффекты анимации в зависимости от направления навигации.
  • CSS-свойства transform предпочтительнее left/top для плавных и производительных анимаций, особенно на мобильных устройствах.

Анимация с использованием <keep-alive>

Если требуется сохранять состояние компонента при навигации, применяется <keep-alive>, что особенно важно для страниц с формами или таблицами данных.

<template>
  <transition name="fade" mode="out-in">
    <keep-alive>
      <router-view v-if="$route.meta.keepAlive" />
    </keep-alive>
    <router-view v-else />
  </transition>
</template>

Преимущества:

  • Компоненты не уничтожаются при переходе, что позволяет сохранять их внутреннее состояние.
  • Совместно с анимациями <transition> обеспечивает плавный и непрерывный пользовательский опыт.

JavaScript-хуки для сложной анимации

Vue позволяет управлять анимацией через JavaScript, предоставляя хуки: before-enter, enter, after-enter, before-leave, leave, after-leave. Это полезно для анимаций с библиотеками типа GSAP или anime.js.

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

<transition
  @before-enter="beforeEnter"
  @enter="enter"
  @leave="leave"
>
  <router-view />
</transition>

<script>
import { gsap } from "gsap";

export default {
  methods: {
    beforeEnter(el) {
      el.style.opacity = 0;
    },
    enter(el, done) {
      gsap.to(el, { opacity: 1, duration: 0.5, onComplete: done });
    },
    leave(el, done) {
      gsap.to(el, { opacity: 0, duration: 0.5, onComplete: done });
    }
  }
}
</script>

Особенности:

  • Хуки позволяют полностью контролировать анимацию с помощью JavaScript.
  • Использование done важно для синхронизации Vue и внешних анимаций.

Адаптация анимаций под мобильные устройства

На мобильных устройствах рекомендуется использовать GPU-ускоренные свойства (transform, opacity) и минимизировать использование width, height и top/left, чтобы избежать лагов. Переходы должны быть короткими (0.2–0.5 секунды) для ощущения отзывчивости.

.slide-enter-active, .slide-leave-active {
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: transform;
}

will-change: transform; заранее уведомляет браузер о предстоящих изменениях, что улучшает производительность анимации.

Итоговая структура проекта с анимацией маршрутов

  • App.vue — обертка <transition> + <router-view> для глобальной анимации.
  • Маршруты с мета-полями (meta.index, meta.keepAlive) для контроля направления и сохранения состояния.
  • CSS-классы для базовых переходов и JavaScript-хуки для сложных анимаций.
  • GPU-ускоренные свойства для плавности на мобильных устройствах.

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

Оглавление