Vue transitions используются для анимации, и тригеррятся в следующих случаях:

- Условный рендеринг через v-if
- Условное отображение с помощью v-show
- Переключение динамических компонентов с помощью специального элемента <component>
- Изменение специального key атрибута

Последний вариант позволяет управлять transitions программно:

<script setup lang="ts">
import { ref } from 'vue';
const show = ref(false);
const animationTrigger = ref(0);
</script>

<template>
<Transition name="slide-fade">
  <p v-if="show" :key="animationTrigger">Hi</p>
</Transition>
<button @click="show = !show">Toggle</button>
<button @click="animationTrigger += 1">Re-trigger animation</button>
...

#tip #animation

Несколько лет назад нужна была анимация для синхронизации данных с сервером для немецкой системы высшего образования, сделалась вот такая кнопка / прогресс-бар.

Есть варианты на Vue 2, Vanilla JS и Web components. Может кто-то захочет проапгрейдить до Vue 3.

#pet #animation

Все браузеры кроме Firefox поддерживают View Transitions API - это примерный аналог анимаций Transition во Vue.js

#animation

Анимацию в вебе обычно делают с помощью CSS (keyframes) или JavaScripts.

С появлением математических CSS функций таких как round(), mod(), sin() появился третий способ, сочетающий в себе плюсы обоих подходов

Здесь подробнее

#css #animation

В CSS есть scroll-driven animations, которые позволяют делать сложные красивые анимации [почти] без JS

Демо

Документация

#css #animation

Вышел vue-router 4.5.0

Из примечательного - по инициативе Эвана на router-link появился prop view-transition, который задействует нативный View Transitions API для перехода между роутами.

<template>
  <RouterLink to="/some-page" view-transition>
    Go to some page
  </RouterLink>
</template>

Анимацию которого можно кастомизировать CSS стилями

Может быть быстрее вьюшного <Transition> и уж точно удобней в записи (по сравнению с конструкцией с router-view ). Но не такой функциональный, для простых переходов.

#router #animation #css