Эта статья представляет собой более полное и подробное объяснение, составленное редактором в сочетании с официальными документами, с все более и более полными кодами.
Эта статья взята из официального документа:
http://cn.vuejs.org/guide/transitions.html
Давайте посмотрим на соответствующие знания о переходной анимации:
① Определение анимации перехода;
Проще говоря, это то, какую форму он исчезнет и появится, когда модуль исчезнет и появляется;
Если вы хотите использовать анимацию перехода, добавьте атрибуты в тег:
Переход = ”Имя анимации перехода»
Например:
<div v-if = "box_1" transition = "mytran"> 1 </div>
Вот Mytran, это название анимации перехода. Это имя класса. Анимация добавит несколько разных расширений на основе этого имени (см. Подробности см. Ниже).
② Связанные события переходной анимации:
【1】 V-IF
【2】 V-Show
【3】 v-for (только запускается при вставке и удалении, вы можете написать его самостоятельно или использовать плагин с анимулированным VUE);
Например, напишите для себя:
<div v-for = "i в элементах" transition = "mytran"> {{i}} </div>Краткий метод написания анимации (см. Ниже)
【4】 Динамические компоненты;
[5] На корневом узле компонента и запускается методом экземпляра VUE (например: vm. $ Appendto (el)). Возможно, добавьте компонент в корневой узел.
③css Анимация:
[1] Во -первых, вам необходимо иметь атрибут перехода, а затем получить его значение;
【2】 Во -вторых, в CSS есть три имени класса со значениями, а именно:
Предполагая, что значение перехода - Mytran, имя класса
иллюстрировать
.mytran-транзирование
В состоянии анимации атрибут перехода CSS размещен здесь, и класс, который он представляет, всегда будет существовать на DOM;
Кроме того, стиль здесь переопределяет стиль, предоставленный классом по умолчанию метки
.mytran-enter
При входе компонент расширяется из этого состояния CSS в текущее состояние CSS, и этот класс имеет только первый кадр.
.mytran-Leave
При выходе компонент восстанавливается в этом состоянии из исходного состояния CSS. Этот класс вступает в силу с начала выхода и удаляется в конце выхода.
Как код:
<style> .box {ширина: 100px; высота: 100px; Граница: 1px твердый красный; дисплей: встроенный блок; } /* Это определяет ситуацию анимации и стиль, когда она существует. Этот стиль будет переопределять стиль в классе*/ .mytran-транзирование {переход: все 0,3 с легкостью; Фоно-цвета: зеленый цвета; } /* .mytran-enter определяет начальное состояние входа* / /* .mytran-Leave определяет конечное состояние отъезда* / .mytran-enter, .mytran-Leave {height: 0; Ширина: 0; } </style> <div id = "app"> <button @click = "change"> нажмите, чтобы скрыть и показать случайным образом </button> <br/> <div v-if = "box_1" transition = "mytran"> 1 </div> <div v-if = "box_2" mytran "> 2 </div> <div v-vif =" dif = "divif =" divif = "vance_3" mytran "> 3 </div> <div v-vif =" divif = ". <script> var vm = new Vue ({el: '#App', data: {box_1: true, box_2: true, box_3: true}, методы: {изменение: function () {for (var i = 1; i <4; i ++) {this ['box_'+] = math.random () 0,5? 300); </script>Нажатие случайным образом заставит 3 блока скрыть или отображать;
④javascript Hook:
[1] Проще говоря, это не влияет на анимацию CSS (все еще изменения в этих трех категориях);
[2] Это в основном используется для захвата входа и отъезда по четыре минуты каждый и используется для выполнения определенных вещей;
【3】 Эти восемь моментов:
Введите: перед Enter (до ввода), введите (перед введением анимации только что начинается), Afterenter (до входа в концы анимации), EnterCancelled (до прерывания Enter);
Выход: Beforeleave (до выхода), оставьте (выходящая анимация только что началась), запоздало (анимация выхода закончилась), LeaveCancelled (выход прерывается);
[4] Модификация DOM будет восстановлена в некоторых случаях. Например, изменение свойства TextContent of DOM на шаге отпуска восстановит исходное состояние при повторном вступлении в DOM; Но в случае изменения на шаге ввода, он не будет восстановлен.
Как код:
Vue.transition ('mytran', {aneverenter: function (el) {// перед введением console.log ("Введите время начала анимации:" + new Date (). GetTime ());}, Enter: function (el) {el.TextContent = new Date ();}, AfterEnter: function (el) {консоль. Beforeleave: Function (el) {console.log ("Оставьте анимацию Время запуска:" + new Date (). getTime ());⑤custom Переход Имя класса:
Причина настройки имени класса перехода заключается в том, что мы не можем требовать, чтобы стиль каждой анимации CSS написан в соответствии с стандартным методом написания Vuejs (например, код загрузки, написанный другими);
ПРИМЕЧАНИЕ. Определение должно быть сделано перед объявлением соответствующего экземпляра VUE.
Прежде всего, я рекомендую коллекцию анимации, рекомендованную официальным учебником Vuejs: (Это не ссылка для загрузки, вам нужно открыть ее, чтобы найти ссылку для загрузки, прежде чем вы сможете загрузить ее)
https://daneden.github.io/animate.css/
После загрузки импортируйте этот файл CSS и начните настраивать анимацию;
<div id = "app"> <button @click = "chance"> нажмите, чтобы скрыть и показывать случайным образом </button> <br/> <div v-if = "box" transition = "Bounce"> 1 </div> </div> <script> vue.transition ("Bounce", {enterclass: 'bounceinleft', leaveclass: 'Bounc '#App', data: {box: true}, методы: {изменение: function () {this.box =! this.box; </script>объяснять:
【1】 Теги для животных необходимы для анимированного класса;
【2】 Enterclass и Leavallss эквивалентны предыдущему XXX-Enter и XXX-Leave;
【3】 Эффект состоит в том, чтобы вспыхивать слева и вспыхивать справа.
[4] Вам нужно установить анимацию, прежде чем объявить экземпляр VUE, в противном случае он будет недействительным;
Используйте анимацию
В Vuejs анимация и анимация перехода разные.
Проще говоря, анимация перехода делится на три шага: постоянный класс, класс, запускаемый при входе и класс, запускаемый при выходе; Только постоянный класс имеет анимационные атрибуты перехода, а два других шага имеют только состояние CSS;
Анимация анимации делятся на два шага: класс, запускаемый при входе, и класс, запускаемый при выходе. Конечно, класс XXX-транспорта существует в DOM (этот класс можно использовать для установки анимационного происхождения или просто не установить этот класс);
В анимации анимации классы классов при входе и выходе должны иметь анимационные эффекты, например:
@keyframes fat {0% {width: 100px} 50% {width: 200px} 100% {width: 100px}} .fat-leave, .fat-enter {animation: fat 1s оба; }При входе и выходе, выполненные имена классов такие же, как и переходы, и находятся в форматах XXX-Leave и XXX-Enter;
Конечно, вы также можете настроить имя класса.
Пример кода:
<style> .box {ширина: 100px; высота: 100px; Граница: 1px твердый красный; дисплей: встроенный блок; } @keyframes fat {0% {width: 100px} 50% {width: 200px} 100% {width: 100px}} .fat-leave, .fat-enter {animation: fat 1s оба; } </style> <div id = "app"> <button @click = "change"> нажмите, чтобы скрыть и отображать случайным образом </button> <br/> <div v-if = "box" transition = "fat"> 1 </div> </div> <script> var vm = new vue ({el: '#App', data: {box: true: true}, methods: {finty () {) }); </script>Эффект:
Исчезнуть: сначала будьте шире, затем восстановитесь, затем исчезнем;
Введите: появиться, расширить, восстановить, остаться;
Здесь я ленив и делю один и тот же эффект анимации.
В дополнение к этому, есть
[1] Явно объявляет тип анимации (если анимация имеет переход и анимацию одновременно, и один из них будет выполнен в разных ситуациях);
[2] Подробное объяснение процесса перехода (порядок выполнения JS Hook и выполнение CSS, когда анимация запускается);
[3] анимация CSS (то есть анимация, как написано выше, опущены подробно);
[4] Переход JavaScript (не крюк JS, крючок означает, что определенная функция будет вызвана на определенном этапе, но этот крючок не имеет ничего общего с анимацией) и использует JavaScript для управления анимацией, такой как Animate Method Jquery;
【5】 Постепенный переход, используемый V-FOR;
Поскольку это не доступно на данный момент, он опущен. Если вам нужно его просмотреть, откройте соединение:
http://cn.vuejs.org/guide/transitions.html
Вышеуказанное представляет собой всесторонний анализ случая анимации перехода Vuejs с седьмыми Vuejs, представленными вам редактором. Я надеюсь, что это будет полезно для вас. Если у вас есть какие -либо вопросы, пожалуйста, оставьте мне сообщение, и редактор ответит вам вовремя. Большое спасибо за вашу поддержку сайту wulin.com!