**Базовые переходы:** ```vue ``` **Динамический переход (slide вперёд/назад):** ```vue ``` **Переход через meta маршрута:** ```typescript const routes = [ { path: '/', component: Home, meta: { transition: 'fade' } }, { path: '/about', component: About, meta: { transition: 'slide-left' } }, { path: '/product/:id', component: ProductDetail, meta: { transition: 'scale' } } ] ``` **Переход с сохранением состояния (KeepAlive + Transition):** ```vue ``` **CSS-анимации вместо transitions (для сложных эффектов):** ```css /* Карточный flip */ .flip-enter-active { animation: flipIn 0.5s ease; } .flip-leave-active { animation: flipOut 0.5s ease; } @keyframes flipIn { from { transform: perspective(600px) rotateY(90deg); opacity: 0; } to { transform: perspective(600px) rotateY(0); opacity: 1; } } @keyframes flipOut { from { transform: perspective(600px) rotateY(0); opacity: 1; } to { transform: perspective(600px) rotateY(-90deg); opacity: 0; } } ``` **JavaScript hooks для программных анимаций (GSAP):** ```vue ``` ## 📌 Реальные кейсы - **SPA с многостраничным ощущением** -- fade между страницами создаёт ощущение нативного приложения - **Мобильное приложение (Ionic/Capacitor)** -- slide left/right имитирует iOS-навигацию - **Wizard/stepper** -- slide в направлении шага (вперёд -- влево, назад -- вправо) - **Лендинги** -- каждая секция с эффектом при смене маршрута ## Частые ошибки ```vue ``` ```vue ``` ```css /* ❌ Анимация без fixed/absolute positioning -- layout jump */ .slide-left-leave-active { transition: transform 0.3s; /* Уходящий компонент занимает место, пока двигается */ } /* ✅ Абсолютное позиционирование для уходящего */ .slide-left-leave-active { transition: transform 0.3s; position: absolute; width: 100%; } ``` ## Резюме `` оборачивает `` через scoped slot с `{ Component, route }`. `mode="out-in"` -- обязателен для последовательных переходов. `:key="route.path"` -- чтобы Vue видел смену. Динамический переход -- через `route.meta.transition` или вычисление направления по глубине пути. Для сложных анимаций -- JavaScript hooks с GSAP. Уходящий элемент стоит позиционировать absolute, чтобы избежать прыжков layout. ---

Как реализовать анимированные переходы между маршрутами?