Система перехода Vue.js позволяет автоматически применять эффекты перехода, когда элементы вставляются или удаляются из DOM. Vue.js вызовет для вас переходы или анимации CSS в нужное время, и вы также можете предоставить соответствующую функцию JavaScript Chook для выполнения пользовательских операций DOM в процессе перехода.
Чтобы применить эффект перехода, вам необходимо использовать функцию перехода на целевом элементе:
<div v-if = "show" transition = "my-transition"> </div>
Функция перехода может использоваться со следующими ресурсами:
• V-IF
• V-Show
• v-for (запускается только при вставке и удалении, используя плагин с анимированным списком VUE)
• Динамические компоненты (см. Компоненты для введения)
• На корневом узле компонента и запускается методом DOM Vue Encement (например, VM. $ Appendto (EL)).
При вставке или удалении элемента с переходом VUE будет:
1. Попробуйте найти объект перехода JavaScript Transition с идентификатором «My -Transition» - зарегистрируйтесь в опции VUE.Tranty (ID, Hooks) или переходов. В случае обнаружения соответствующий крючок будет вызван на разных этапах перехода.
2. Автоматически снижают целевой элемент для переходов или анимации CSS, а также добавьте/удалите имя класса CSS, когда это необходимо.
3. Если крючок JavaScript не найден, а переход/анимация CSS не обнаруживается, операция DOM (вставка/удаление) выполняется немедленно в следующем кадре.
CSS переход
Пример
Типичный переход CSS такой:
<div v-if = "show" transition = "expand"> hello </div>
Затем добавьте правила CSS для `.expand-transition`,` .expand-enter` и `.expand-leave`:
/* Требуется*/. Expand Transition {переход: все .3s Easy; Высота: 30px; Заполнение: 10px; фоновый цвет: #EEE; переполнение: hidden;}/* .expand-enter определяет начальное состояние входа* //*. Заполнение: 0 10px; непрозрачность: 0;}Вы можете достичь разных переходов на одном и том же элементе посредством динамического связывания:
<div v-if = "show": transition = "transitionname"> hello </div>
New Vue ({el: '...', data: {show: false, transitionname: 'fade'}})Кроме того, можно предоставить крючки JavaScript:
Vue.transition ('expand', {aneverenter: function (el) {el.textcontent = 'передентре'}, enter: function (el) {el.textContent = 'enter'}, AfterEnter: function (el) {el.textContent = 'AfterEnter'}, EnterCancelded: function (el) {// gancellation ateave ateave ateave: elbellation ateaiavation ateaiavatation}, elebelatation}, eLeaVation ateaiavatation ateavetation} eLeaVatation} eLeaVation} el.textcontent = 'beforeleave'}, оставить: function (el) {el.textContent = 'Leave'}, AfterLeave: function (el) {el.textContent = 'AfterLeave'}, LeaVeCancelled: function (el) {// gange atemellation}})Переходное название класса CSS
Добавление и переключение имен классов зависят от значения атрибута перехода. Например, Transition = "FADE", будет три имена класса CSS:
1 .. Переворот Фаде всегда сохраняется на элементе.
2..fade-enter определяет начальное состояние вступления в переход. Примените только один кадр и удалите его немедленно.
3..fade-Leave определяет конечное состояние оставления перехода. Эффективно в начале перехода от отправления и удаления после его заканчивания.
Если атрибут перехода не имеет значения, имена классов являются.
Имя класса пользовательского перехода
1.0.14 Новый
Мы можем объявить пользовательское имя класса перехода CSS в определении JavaScript Transition. Эти пользовательские имена классов переопределяют имена классов по умолчанию. Это может быть очень полезно, когда вам нужно сотрудничать с сторонними анимационными библиотеками CSS, такими как animate.css:
<div v-show = "ok" transition = "Bounce"> Смотрите, как я отскочил </div>
Vue.transition ('Bounce', {enterclass: 'Bounceinleft', LeaveClass: 'Bounsoutright'})Явно объявляет тип перехода CSS
1.0.14 Новый
Vue.js должен добавить слушателя событий в элемент перехода, чтобы прослушать, когда переход заканчивается. Основываясь на используемом CSS, событие является либо переходной или анимацией. Если вы используете только один из двух, Vue.js сможет автоматически вывести соответствующий тип события на основе эффективных правил CSS. Однако в некоторых случаях элемент может иметь два типа анимации одновременно. Например, вы можете захотеть запустить анимацию CSS, а элемент обладает эффектом перехода CSS, когда мышь приостановлена. В этом случае вам нужно явно объявить тип анимации (анимация или переход), который вы хотите, чтобы VUE обрабатывал:
Vue.transition ('Bounce', {// Этот эффект перехода будет прослушивать только тип события AnimationEnd`: 'animation'})Подробное объяснение процесса перехода
При изменении свойства Show Vue.js вставит или удаляет элемент <div> соответственно, изменение имени класса перехода в соответствии со следующими правилами:
• Если шоу станет ложным, Vue.js будет:
1. Позвоните в крюк Beforeleave;
2. Добавьте имя класса V-Leave в элемент, чтобы запустить переход;
3. Позвоните в крючок от оставить;
4. Подождите, пока переход к концу (послушайте событие Transitionend);
5. Удалить элементы из DOM и удалить имя класса V-Leave;
6. Позвоните в крючок для запоздачи.
• Если шоу станет правдой, Vue.js будет:
1. Позвоните в крючок до начала;
2. Добавьте имя класса V Enter в элемент;
3. Вставьте его в DOM;
4. Позвоните в крючок Enter;
5. Принудитесь макета CSS один раз, чтобы сделать V-enter эффективным. Затем удалите имя класса V Enter, чтобы запустить переход и вернуться в исходное состояние элемента;
6. Подождите, пока переход к концу;
7. Позвоните в крючок для загрязнения.
Кроме того, если элемент удаляется, когда его переход вступительного перехода все еще находится в процессе, энтерерсифицированный крюк призван для очистки изменений или ввода созданных таймеров. То же самое верно для того, чтобы оставить переход по очереди.
Когда все приведенные выше функции крюка называются, их это указывает на экземпляр Vue, к которому они принадлежат. Правила компиляции: в каком контексте переход компилируется, это этот момент, в какой контекст.
Наконец, введите и оставляйте, может иметь второй необязательный параметр обратного вызова, который явно контролирует, как заканчивается переход. Следовательно, нет необходимости ждать события CSS TransitionEnd, Vue.js будет ждать, пока вы можете позвонить в этот обратный вызов вручную, чтобы закончить переход. Например:
Enter: function (el) {// Нет второго параметра // Событие CSS TransitionEnd определяет, когда переход заканчивается}против.
Enter: function (el, dode) {// Существует второй параметр // Переход заканчивается только тогда, когда `dode` называется}<p> Когда несколько элементов переходят вместе, vue.js будет пакетно и только один раз.
CSS анимация
Использование анимации CSS переходит на CSS. Разница состоит в том, что в анимации имя класса V Enter не удаляется сразу после того, как узел вставлен в DOM, но удаляется, когда событие AnimationEnd запускается.
Пример: (префикс совместимости опущен)
<span v-show = "show" transition = "Bounce"> Посмотрите на меня! /* В противном случае масштабная анимация не будет работать*/}. Bounce-enter {animation: Bounce-in .5s;}. Bounce-Leave {animation: Bounce-Out .5s;}@KeyFrames Bounce-in {0% {Transform: Scale (0); } 50% {преобразование: масштаб (1,5); } 100% {transform: Scale (1); }}@keyframes Bounce-Out {0% {Transform: Scale (1); } 50% {преобразование: масштаб (1,5); } 100% {transform: Scale (0); }}JavaScript Transition
Вы также можете использовать только крючки JavaScript без определения каких -либо правил CSS. При использовании только JavaScript, крючки Enter and Offee должны вызвать обратный вызов, в противном случае они будут называться синхронно, и переход немедленно закончится.
Это хорошая идея, чтобы явно объявить CSS: ложь для JavaScript Transitions, а Vue.js пропустит обнаружение CSS. Это также предотвратит непреднамеренно вмешиваться правила CSS.
В следующем примере мы используем jQuery для регистрации пользовательского перехода JavaScript:
Vue.transition ('fade', {css: false, enter: function (el, end) {// элемент был вставлен в Dom //, называемый после анимации $ (el) .css ('непрозрачность', 0). Animate ({непрозрачность: 1}, 1000, выполнен)}, Entercelded: function (el) {$ (el). {// такая же, как Enter $ (el) .Animate ({opacity: 0}, 1000, DED)}, LeaVeCancelled: function (el) {$ (el) .stop ()}})Затем используйте функцию перехода:
<p transition = "fade"> </p>
Асимптотический переход
Переходы можно использовать вместе с V-FOR для создания асимптотического перехода. Добавьте функцию ошеломляющего, вводитесь в Shinger или уступите к элементу перехода:
<div v-for = "пункт в списке" transition = "stagger" stagger = "100"> </div>
В качестве альтернативы, предоставьте крюк, вводите в Enter-Shigger или уход для лучшего контроля:
Vue.transition ('stagger', {stagger: function (index) {// Каждый элемент перехода добавляет задержку 50 мс //, но максимальный предел задержки составляет 300 мс возврата math.min (300, индекс * 50)}})Эта статья была составлена в «Учебное пособие по изучению компонентов Vue.js Front-End», и все могут учиться и читать.
Для обучения по компонентам Vue.js, пожалуйста, нажмите на учебник по обучению компонентов Special Topic.js.
Выше всего содержание этой статьи. Я надеюсь, что это будет полезно для каждого обучения, и я надеюсь, что все будут поддерживать Wulin.com больше.