Обзор:
Vue предоставляет несколько различных способов применения переходов при вставке, обновлении или удалении DOM.
Включает в себя следующие инструменты:
- Автоматически применять классы в переходах и анимации CSS
- Может использоваться со сторонними библиотеками анимации CSS, такими как Animate.css.
- Напрямую манипулируйте DOM с помощью JavaScript в хуках перехода
- Может использоваться со сторонними библиотеками анимации JavaScript, такими как Velocity.js.
Предисловие:
Анимация является неотъемлемой частью ежедневной разработки, которая не только делает прямое переключение элементов более естественным, но и значительно улучшает взаимодействие с пользователем.Поэтому она также обеспечивает очень сильную поддержку анимации в Vue.Vue не только поддерживает использование CSS для написания некоторые эффекты перехода также поддерживают JS, но в этой статье описывается, как использовать CSS для создания анимации перехода.
Имя класса перехода реализует анимацию:
Сначала кидаем картинку, украденную из официального документа:
Анимация входит:
- v-enter: анимация перед входомисходныйусловие
- v-enter-to: После запуска анимацииконецусловие
- v-enter-active: период времени, когда анимация входит
PS: Первое и второе - это временные точки, третье - период времени.
Анимация прочь:
- v-leave: до того, как анимация уйдетисходныйусловие
- v-leave-to: после выхода анимацииконецусловие
- v-leave-active: период времени, когда анимация уходит
PS: Первое и второе - это временные точки, третье - период времени. Примечание. В официальной документации концепции есть более конкретное объяснение.
Принцип реализации анимации перехода:
1.首先最基础的一点在于 如果你想要在单元素/单个组件之中实现过渡动画 那么 你需要在元素/组件所在的HTML标签之外包裹一层 <transition>标签，无论是过渡还是动画 都需要这个<transition>包起来。
2.当元素/组件被<transition>标签包裹了以后 那么Vue会自动的为我们构建一个动画流程 具体的流程会在下文提到 因此先记住这句话就行啦 也就是说 如果你在<style>标签中添加了一些样式的话Vue会自动的在某个时间节点给元素或者组件添加、删除对应的样式
3.上面提到了当元素/组件被<transition>标签包裹的时候Vue会自动的构建动画流程 也就是自动的在某个时间节点添加/删除对应的CSS类名 Vue其实提供了6个对应的类名 ，如上图所示。
В анимации могут быть некоторые абстракции, вот несколько картинок, которые помогут вам понять:
Мы предполагаем, что черная горизонтальная линия — это весь поток анимации, а красная точка — момент начала анимации:
Анимация входит:
1. Когда элемент обернут переходом, Vue автоматически проанализирует стиль CSS элемента и создаст процесс анимации. Затем, когда мы оборачиваем элемент/компонент тегом, Vue добавит два имени класса CSS v-enter/v-enter-to перед началом анимации.
3. Затем, когда анимация вот-вот будет выполнена: в div добавятся два класса, vv — v-enter и v-enter-active. Когда первый кадр анимации заканчивается и выполняется второй кадр: Vue прямо сейчас удалит класс v-enter, а затем добавит класс v-enter-to. Класс v-enter-active будет существовать на протяжении всего процесса анимации до конца анимации.
4. В последний момент выполнения анимации: Vue удалит v-enter-active и v-enter-to.
Выше мы говорили про анимацию элемента от скрытия до показа, теперь поговорим об анимации от показа до скрытия, которая похожа на картинку выше, но имя класса изменилось:
Анимация прочь:
1. Когда элемент обернут переходом, Vue автоматически проанализирует стиль CSS элемента и создаст процесс анимации. Затем, когда мы оборачиваем элемент/компонент тегом, Vue добавит два имени класса CSS v-leave/v-leave-to перед началом анимации.
3. Затем, когда анимация вот-вот будет выполнена, в div добавятся два класса, vv — это v-leave и v-leave-active. Когда заканчивается первый кадр анимации и выполняется второй кадр: Vue прямо сейчас удалит класс v-leave, а затем добавит класс v-leave-to. Класс v-leave-active будет существовать на протяжении всего процесса анимации до конца анимации.
4. В последний момент выполнения анимации: Vue удалит v-leave-active и v-leave-to.
Краткое описание анимации перехода:
Вывод 1. Таким образом, два класса fade-enter-active и fade-leave-active на самом деле проходят через всю анимацию, поэтому добавьте сюда анимацию перехода или свойства мониторинга. Остальные четыре свойства связаны с изменениями отслеживаемых свойств анимации, сделанными в определенный момент времени.
Вывод 2: состояния v-enter-to и v-leave одинаковы. И вообще говоря, состояния v-enter и v-leave-to тоже одинаковы. Итак, мы можем записать эти четыре состояния в виде двух групп.
То есть: анимация Vue достигается путем добавления классов, связанных с анимацией, к элементам в определенное время.
Небольшая демонстрация анимации перехода
Давайте реализуем несколько небольших демонстраций через имя класса перехода Vue:
<style>
/* 盒子样式 */
/* 盒子样式 */
.box {
width: 100px;
height: 100px;
background: red;
}
/* 第一个盒子的效果 */
/* tran1-enter-active入场动画的时间段 tran1-leave-active离场动画的时间段 */
.tran1-enter-active, .tran1-leave-active {
transition: opacity 1s;/*期间，设置过渡的属性：all表示所有的属性、时间为1秒、过渡的状态*/
}
/* 显示前或隐藏后的效果 */
/* tran1-enter 这是一个时间点，是进入之前元素的起始状态，此时还没有进入 */
/* tran1-leave-to 是动画离开之后，离开的终止状态，此时元素动画已经结束 */
.tran1-enter,.tran1-leave-to {
opacity: 0; /* 都是隐藏效果 */
}
/* 第二个盒子的效果 */
/* 显示过渡效果 */
.tran2-enter-active {
transition: all 1s ease;
}
/* 隐藏过渡效果 */
.tran2-leave-active {
transition: all 1s ease;
}
/* 显示前或隐藏后的效果 */
.tran2-enter, .tran2-leave-to {
opacity: 0;
transform: translateX(10px);/* 水平方向右移10px tran2-enter 一开始让DOM元素处于靠右10px的位置 */
}
</style>
<body>
<!-- 过渡效果和动画效果都需要用transition标签包住 -->
<!-- transition 元素，是 Vue 官方提供的 -->
<!-- 过渡效果 -->
<div id="tran1">
<button @click="show = !show">渐变过渡</button>
<transition name="tran1" mode="">
<div class="box" v-if = "show"></div>
</transition>
</div>
<br>
<div id="tran2">
<button @click="show = !show">渐变平滑过渡</button>
<transition name="tran2" mode="">
<div class="box" v-if="show"></div>
</transition>
</div>
</body>
<script>
let vm1 = new Vue({
el: '#tran1',
data: {
show: true,
}
})
let vm2 = new Vue({
el: '#tran2',
data: {
show: true,
}
})
</script>
Пользовательское имя класса перехода
То есть изменить префикс имени класса перехода
В предыдущем абзаце имена классов перехода .v-enter и .v-leave-to начинаются с v-. При этом существует ограничение: если предположить, что два элемента DOM обернуты переходами, то оба элемента DOM имеют анимацию, определенную в v-.
Так что, если мы хотим определить анимацию двух элементов DOM по отдельности? Здесь мы можем сделать это, изменив префикс имени класса перехода. Например:
1. Пользовательские псевдонимы
<transition name="my">
<h6 v-if="flag2">这是一个H6</h6>
</transition>
В приведенном выше коде мы добавили name="my".
2. Используйте псевдонимы (мы можем использовать .my-enter, .my-leave-для этих имен классов)
.my-enter,
.my-leave-to {
opacity: 0;
transform: translateY(70px);
}
CSS-анимация: библиотека Animate.css
2, библиотека Animate.css в Vue
<style>
/* 动画效果 */
.anim1-enter-active {
animation: bounce-in 1s;
}
.anim1-leave-active {
animation: bounce-in 3s reverse;
}
/* @keyframes自定义动画效果，然后可以被引用 */
@keyframes bounce-in {
/* 若总共持续1秒，则0%表示0秒，50%表示0.5秒，100%表示1秒 */
0% { transform: scale(0); }
50% { transform: scale(1.5); }
100% { transform: scale(1); }
}
</style>
<body>
<!-- 动画效果 -->
<div id="anim1">
<button @click="show = !show">放大缩小动画</button>
<br>
<transition name='anim1'>
<div class="box" v-if="show"></div>
</transition>
</div>
</body>
<script>
let vm3 = new Vue({
el: '#anim1',
data: {
show: true,
}
})
</script>
2. После того, как у нас есть тег перехода, нужно ли нам использовать имя селектора, например, исчезать-входить-активно или исчезать-оставлять-активным? Нет, у нас по-прежнему есть следующий селектор, который можно использовать в нескольких местах: селектор имеет обычное имя, а такие атрибуты, как enter-active-class и leave-active-class, записываются в теге перехода.
/* 动画效果2 */
.active { /* 正常命名*/
animation: bounce-in 1s;
}
.leave {/* 正常命名*/
animation: bounce-in 3s reverse;
}
/* @keyframes自定义动画效果，然后可以被引用 */
@keyframes bounce-in {
/* 若总共持续1秒，则0%表示0秒，50%表示0.5秒，100%表示1秒 */
0% { transform: scale(0); }
50% { transform: scale(1.5); }
100% { transform: scale(1); }
}
<div id="anim1">
<button @click="show = !show">放大缩小动画2</button>
<br>
<!--给transition添加enter-active-class和leave-active-class两个属性，并与CSS选择器绑定-->
<transition enter-active-class="active" leave-active-class="leave">
<div class="box" v-if="show"></div>
</transition>
</div>
Использование Animate.css
3. С помощью описанного выше метода привязки класса анимации к обычному стилю CSS в теге перехода мы можем использовать библиотеку Animate.css.Перейдите на официальный сайт, чтобы загрузить эту библиотеку, и мы можем напрямую использовать вышеуказанные эффекты анимации без пишем сами.. Официальный сайт:Но Eden.GitHub.IO/animate.CSS…
<link rel="stylesheet" href="./am.css">
<div id="anim1">
<button @click="show = !show">放大缩小动画3</button>
<br>
<!--给transition添加enter-active-class和leave-active-class两个属性，并与CSS选择器绑定-->
<transition enter-active-class="animated swing" leave-active-class="animated shake">
<div class="box" v-if="show"></div>
</transition>
</div>
Примечания по использованию animate.css:
В приведенном выше коде мы используем классы bounceIn и bounceOut, предоставляемые animate.css, для анимации входа и выхода. Примечание 1. Два имени класса enter-active-class и leave-active-class являются ключевыми словами в анимации Vue и не могут быть записаны как имена классов, которые вы произвольно создаете.
Примечание 2: два класса bounceIn и bounceOut нельзя использовать напрямую, а анимированный класс следует добавить впереди, иначе анимация не сработает. Конечно, в приведенном выше коде мы также можем переместить код class=animated в тег h3, эффект тот же, а именно:
<transition enter-active-class="swing" leave-active-class=" shake" :duration="{ enter: 1000, leave: 300 }>
<div class="box" v-if="show" class="animated"></div>
</transition>
Если мы хотим установить продолжительность анимации входа и выхода, мы можем использовать для этого :duration.
Используйте :duration="значение в миллисекундах", чтобы единообразно установить продолжительность анимации для входа и выхода. Используйте :duration="{ введите: 1000, оставьте: 300}", чтобы установить продолжительность входа и продолжительность выхода соответственно.
Короче говоря, vue переходы и анимации, на официальном сайте много всего, я сначала напишу их здесь, а потом вернусь, чтобы продолжить обновление, когда будет время.
Справочная статья: