Перехід та transitiongroup у Vue.js

Що таке Transition?

<Transition> — це вбудований компонент Vue, який застосовує анімування при вході/виході, коли елемент або компонент вставляється, видаляється або перемикається в DOM.

Основне використання

vue

<template>
  <button @click="show = !show">Перемкнути</button>

  <Transition name="fade">
    <p v-if="show">Привіт!</p>
  </Transition>
</template>

<style>
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.3s ease;
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}
</style>

Потік CSS класів

Vue автоматично застосовує ці CSS класи:

ENTER:  v-enter-from → v-enter-active → v-enter-to
LEAVE:  v-leave-from → v-leave-active → v-leave-to

З name="fade":

Клас	Коли
`fade-enter-from`	Початковий стан входу
`fade-enter-active`	Активний стан під час входу
`fade-enter-to`	Кінцевий стан входу
`fade-leave-from`	Початковий стан виходу
`fade-leave-active`	Активний стан під час виходу
`fade-leave-to`	Кінцевий стан виходу

Приклад слайд-переходу

vue

<Transition name="slide">
  <div v-if="show" class="panel">Контент</div>
</Transition>

<style>
.slide-enter-active,
.slide-leave-active {
  transition: transform 0.3s ease, opacity 0.3s ease;
}

.slide-enter-from {
  transform: translateX(-100%);
  opacity: 0;
}

.slide-leave-to {
  transform: translateX(100%);
  opacity: 0;
}
</style>

JavaScript Hooks

vue

<Transition
  @before-enter="onBeforeEnter"
  @enter="onEnter"
  @after-enter="onAfterEnter"
  @before-leave="onBeforeLeave"
  @leave="onLeave"
  @after-leave="onAfterLeave"
>
  <div v-if="show">Контент</div>
</Transition>

<script setup>
function onEnter(el: Element, done: () => void) {
  // Використовуйте GSAP, anime.js тощо.
  gsap.from(el, { opacity: 0, y: -20, onComplete: done })
}

function onLeave(el: Element, done: () => void) {
  gsap.to(el, { opacity: 0, y: 20, onComplete: done })
}
</script>

TransitionGroup (Списки)

Анімувати елементи списку, які входять, виходять і рухаються:

vue

<template>
  <TransitionGroup name="list" tag="ul">
    <li v-for="item in items" :key="item.id">
      {{ item.text }}
    </li>
  </TransitionGroup>
</template>

<style>
.list-enter-active,
.list-leave-active {
  transition: all 0.3s ease;
}

.list-enter-from,
.list-leave-to {
  opacity: 0;
  transform: translateX(30px);
}

/* MOVE перехід — плавно переставляє елементи */
.list-move {
  transition: transform 0.3s ease;
}

/* Забезпечте, щоб вихідні елементи були виведені з потоку */
.list-leave-active {
  position: absolute;
}
</style>

<Transition> обробляє анімування входу/виходу для одиничного елемента з CSS класами або JavaScript хуками. <TransitionGroup> обробляє анімування списків, включаючи переходи переміщення. Використовуйте mode="out-in" для плавного перемикання компонентів. Це потужні вбудовані інструменти, які не потребують додаткових бібліотек для більшості анімацій.

Коротка відповідь

Для співбесіди

Premium

Коротка відповідь допоможе вам впевнено відповідати на цю тему під час співбесіди.

Дочитали статтю?

Практика завдань

Перехід та transitiongroup у Vue.js

#Що таке Transition?

#Основне використання

#Потік CSS класів

#Приклад слайд-переходу

#JavaScript Hooks

#TransitionGroup (Списки)

#Режими переходу