Русский

Учебник VueJS

VueJS - Transition и анимация

Введение

Здравствуйте, будущие маги Vue.js! ? Я рад быть вашим проводником в этом увлекательном путешествии через魔法льный мир transition и анимации в Vue.js. Как кто-то, кто уже давно преподает информатику, я могу сказать, что добавление плавных transition и завораживающих анимаций в ваши веб-приложения - это как добавление посыпки на кекс - это делает все более приятным!

VueJS - Transition & Animation

Не волнуйтесь, если вы новички в программировании. Мы начнем с самых азов и будем двигаться вверх. К концу этого урока вы будете создавать анимации, которые заставят ваших друзей сказать: "Вау, как ты это сделал?" Так что, погружаемся в это!

Transition

Что такое Transition?

В мире веб-разработки transition - это как плавный переход из одного состояния в другое. Представьте себе выключатель света, который не просто abruptly включается и выключается, а постепенно светлеет или темнеет. Вот суть transition!

Пример базового Transition

Давайте начнем с простого примера. Мы создадим кнопку, которая при нажатии показывает или скрывает сообщение с плавным эффектом Fade.

<template>
<div>
<button @click="show = !show">Переключить</button>
<transition name="fade">
<p v-if="show">Здравствуйте, я сообщаю с transition!</p>
</transition>
</div>
</template>

<script>
export default {
data() {
return {
show: false
}
}
}
</script>

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

Давайте разберем это:

  1. У нас есть кнопка, которая при нажатии переключает переменную show.
  2. Компонент <transition> обертывает наше сообщение, с атрибутом name установленным в "fade".
  3. Директива v-if на абзаце показывает или скрывает его в зависимости от переменной show.
  4. В секции <style> мы определяем наши классы transition:
  • .fade-enter-active и .fade-leave-active устанавливают продолжительность transition в 0.5 секунд.
  • .fade-enter и .fade-leave-to устанавливают начальную и конечную непрозрачность в 0 (невидимая).

Когда вы нажмете кнопку, сообщение будет плавно появляться и исчезать. Не правда ли, это классно?

Анимация

В чем разница между Transition и Анимацией?

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

Пример базовой анимации

Давайте создадим анимацию прыгающего мяча:

<template>
<div>
<button @click="show = !show">Прыгнуть!</button>
<transition name="bounce">
<p v-if="show">?</p>
</transition>
</div>
</template>

<script>
export default {
data() {
return {
show: false
}
}
}
</script>

<style>
.bounce-enter-active {
animation: bounce-in 0.5s;
}
.bounce-leave-active {
animation: bounce-in 0.5s reverse;
}
@keyframes bounce-in {
0% {
transform: scale(0);
}
50% {
transform: scale(1.25);
}
100% {
transform: scale(1);
}
}
</style>

В этом примере:

  1. Мы используем тот же механизм переключения кнопки, что и раньше.
  2. Компонент <transition> теперь имеет имя "bounce".
  3. В секции <style> мы определяем:
  • .bounce-enter-active применяет анимацию bounce-in.
  • .bounce-leave-active применяет ту же анимацию в обратном порядке.
  • Rule @keyframes определяет нашу анимацию bounce-in с тремя шагами.

Когда вы нажмете кнопку, мяч появится с эффектом прыжка и исчезнет с обратным прыжком. Забавно, правда?

Custom Transition Classes

Vue.js предоставляет нам гибкость для использования пользовательских CSS классов для наших transition. Это super полезно, когда вы хотите использовать внешние CSS библиотеки анимаций, такие как Animate.css.

Вот как вы можете использовать пользовательские классы:

<template>
<div>
<button @click="show = !show">Анимировать!</button>
<transition
enter-active-class="animated fadeInDown"
leave-active-class="animated fadeOutUp"
>
<p v-if="show">? В бесконечность и обратно!</p>
</transition>
</div>
</template>

<script>
export default {
data() {
return {
show: false
}
}
}
</script>

<style>
/* Предположим, что мы импортировали Animate.css здесь */
</style>

В этом примере, мы используем классы Animate.css напрямую в нашем компоненте <transition>. Атрибуты enter-active-class и leave-active-class позволяют нам указать пользовательские классы для входа и выхода анимации.

Explicit Transition Duration

Иногда вы можете захотеть explicitly установить, как долго должен длиться transition или анимация. Vue.js позволяет вам сделать это с помощью пропа :duration:

<template>
<div>
<button @click="show = !show">Медленное движение</button>
<transition :duration="1000">
<p v-if="show">Я двигаюсь медленно...</p>
</transition>
</div>
</template>

<script>
export default {
data() {
return {
show: false
}
}
}
</script>

<style>
.v-enter-active, .v-leave-active {
transition: all 1s;
}
.v-enter, .v-leave-to {
opacity: 0;
transform: translateY(30px);
}
</style>

Здесь мы устанавливаем продолжительность в 1000 миллисекунд (1 секунда) для входа и выхода transition. Вы также можете установить разные продолжительности для входа и выхода:

<transition :duration="{ enter: 500, leave: 800 }">
<!-- ... -->
</transition>

JavaScript Hooks

Для еще большего контроля над вашими transition, Vue.js предоставляет JavaScript hooks. Это как маленькие помощники, которые позволяют вам выполнять код в конкретные моменты во время transition.

Вот пример:

<template>
<div>
<button @click="show = !show">Анимировать</button>
<transition
@before-enter="beforeEnter"
@enter="enter"
@after-enter="afterEnter"
@enter-cancelled="enterCancelled"
@before-leave="beforeLeave"
@leave="leave"
@after-leave="afterLeave"
@leave-cancelled="leaveCancelled"
>
<p v-if="show">? Я контролируюсь JavaScript!</p>
</transition>
</div>
</template>

<script>
export default {
data() {
return {
show: false
}
},
methods: {
beforeEnter(el) {
console.log('Before enter');
},
enter(el, done) {
console.log('Enter');
done();
},
afterEnter(el) {
console.log('After enter');
},
enterCancelled(el) {
console.log('Enter cancelled');
},
beforeLeave(el) {
console.log('Before leave');
},
leave(el, done) {
console.log('Leave');
done();
},
afterLeave(el) {
console.log('After leave');
},
leaveCancelled(el) {
console.log('Leave cancelled');
}
}
}
</script>

Эти hooks дают вам точный контроль над процессом transition. Вы можете использовать их для запуска других анимаций, обновления данных или выполнения любых других действий в конкретные моменты во время transition.

Transition at the Initial Render

По умолчанию, transition в Vue.js occur только когда элемент вставляется или удаляется из DOM. Но что, если вы хотите, чтобы элемент transitionировал при initial рендере? Vue.js позаботился и об этом с атрибутом appear:

<template>
<div>
<transition appear>
<p>? Я transitionируюсь с transition!</p>
</transition>
</div>
</template>

<style>
.v-enter-active {
transition: all .3s ease;
}
.v-enter {
opacity: 0;
transform: translateY(-20px);
}
</style>

С атрибутом appear, элемент будет transitionироваться при первом рендере компонента.

Animation on Components

Последнее, о чем я想说, это анимация компонентов. Отличная новость в том, что всеtransitionные функции, о которых мы говорили, можно использовать и на ваших пользовательских компонентах!

<template>
<div>
<button @click="toggleComponent">Переключить компонент</button>
<transition name="fade" mode="out-in">
<component :is="currentComponent"></component>
</transition>
</div>
</template>

<script>
import ComponentA from './ComponentA.vue'
import ComponentB from './ComponentB.vue'

export default {
components: {
ComponentA,
ComponentB
},
data() {
return {
currentComponent: 'ComponentA'
}
},
methods: {
toggleComponent() {
this.currentComponent = this.currentComponent === 'ComponentA' ? 'ComponentB' : 'ComponentA'
}
}
}
</script>

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

В этом примере, мы переключаем между двумя компонентами с fade transition. Атрибут mode="out-in" обеспечивает то, что старый компонент transitionируется出去 перед тем, как новый component transitionируется внутрь.

Заключение

Вау, мы covered много материала! От базовых transition до сложных анимаций, пользовательских классов до JavaScript hooks и даже анимации компонентов. Помните, ключ к овладению этими концепциями - это практика. Так что экспериментируйте с этими примерами, комбинируйте разные техники и, самое главное, получайте удовольствие!

Анимации и transition могут действительно оживить ваши Vue.js приложения. Они не только делают их красивыми (хотя это certainly plus!), но и улучшают пользовательский опыт, предоставляя визуальную обратную связь и hướngуя пользователей по вашему приложению.

Продолжайте исследовать, продолжайте создавать, и скоро вы станете гуру анимации в вашей команде разработчиков. Счастливого кодирования, будущие мастера Vue.js! ?✨

Method Description
transition Обертывает элемент или компонент для применения enter/leave transition
animation Определяет повторяемую анимацию, которая может быть применена к элементам
enter-active-class Указывает пользовательский CSS класс для enter transition
leave-active-class Указывает пользовательский CSS класс для leave transition
:duration Устанавливает продолжительность transition
@before-enter JavaScript hook, вызываемый перед началом enter transition
@enter JavaScript hook, вызываемый при начале enter transition
@after-enter JavaScript hook, вызываемый после окончания enter transition
@enter-cancelled JavaScript hook, вызываемый при отмене enter transition
@before-leave JavaScript hook, вызываемый перед началом leave transition
@leave JavaScript hook, вызываемый при начале leave transition
@after-leave JavaScript hook, вызываемый после окончания leave transition
@leave-cancelled JavaScript hook, вызываемый при отмене leave transition
appear Применяет transition на initial рендер элемента
mode Указывает время leave/enter transition

Credits: Image by storyset

Предыдущий учебник:
VueJS - Отрисовка
Следующий учебник:
VueJS - Директивы