Ввод / выход и список переходов

Vue.js предоставляет множество способов применения переходов, когда элементы вставляются, обновляются или удаляются из DOM. Эти способы включают инструменты для:

  • автоматического применения классов для переходов и анимации CSS;
  • интеграции сторонних библиотек анимации CSS, например Animate.css
  • использовать JavaScript для управления DOM непосредственно во время переходов.
  • интегрировать сторонние библиотеки анимации JavaScript, например Velocity.js

Переход отдельных элементов/компонентов

Vue предоставляет нам компонент-оболочку перехода, это позволяет нам добавлять переходы входа/выхода для любого компонента или элемента в следующий контекст:

  • Условный рендеринг с использованием v-if
  • Динамические компоненты
  • Корневые узлы компонентов
  • Условное отображение с использованием v-show>

Пример показан ниже:

HTML

  

привет

JS

  новый Vue (  {el: '#demo', data: {show: true}})  

CSS

  .fade-enter-  active, .fade-leave-active {transition: opacity .5s;}. fade-enter, .fade-leave-to/* .fade-leave-active ниже версии 2.1.8 */{opacity: 0;}  

Классы перехода

Для перехода входа/выхода можно применять шесть классов.

  1. v-enter: начальное состояние для ввода.
  2. v-enter-active: активное состояние для ввода.
  3. v-enter- to: конечное состояние для входа.
  4. v-leave: начальное состояние для выхода.
  5. v-leave-active: активное состояние для выхода.
  6. v-leave-to: конечное состояние для выхода.

Все эти классы будут иметь префикс с именем перехода. Префикс v- является префиксом по умолчанию, когда мы используем элемент без имени. но если бы у нас был , мы можем изменить v-enter на my-transition-enter.

Переходы CSS

наиболее распространенные типы переходов используют переходы CSS:

  

hello

new Vue ({el: '#example -1 ', data: {show: true}})

CSS

  .slide-fade-enter-active {  переход: все .3s easy;}. slide-fade-leave-active {переход: все .8s cubic-bezier (1.0, 0.5, 0.8, 1. 0);} преобразование: translateX (10px);  opacity: 0;}  

Анимация CSS

Мы можем применять анимацию CSS так же, как применяем CSS переходы, разница в том, что v-enter удаляется не сразу после вставки элемента, а при анимированном событии:

HTML

  

образец Lorem ipsum

JS

  new Vue ({el: '# example-2'  , data: {show: true}})  

CSS

  .bounce-enter-active {animation: bounce-in  .5s;}. Bounce-leave-active {animation: bounce-in .5s reverse;} @ keyframes bounce-in {0% {transform: scale (0);  } 50% {преобразование: масштаб (1,5);  } 100% {преобразование: масштаб (1);  }}  

Настраиваемые классы перехода

Мы можем указать настраиваемые классы перехода, чтобы переопределить обычные имена классов, предоставив следующие атрибуты:

  • enter-class
  • enter-active-class
  • enter-to-class ( 2.1.8+)
  • leave-class
  • leave-active-class
  • leave-to-class (2.1.8+ )

это важно, когда мы хотим использовать внешнюю библиотеку CSS вместе с системой переходов Vue.

Использование переходов и анимации Вместе

Для этого нам нужно будет прикрепить прослушиватели событий, чтобы знать, когда переход закончился. Он может быть либо с переходом, либо с анимацией, это зависит от типа применяемых правил CSS.

Однако, когда нам нужны оба они в одном элементе, нам придется явно объявить тип, который нам нужен Vue в атрибуте типа со значением перехода или анимации.

Явные длительности перехода

По умолчанию Vue ожидает первого анимированного или перенесенного события в корневом переходном элементе. Но бывают случаи, когда это нежелательно, например, мы можем указать явную продолжительность перехода (в миллисекундах), используя свойство duration в компоненте .

Кроме того, мы можем указать отдельные значения для продолжительности входа и выхода:

   ...   

Перехватчики JavaScript

мы также можем определять перехватчики JavaScript в атрибутах:

HTML

      

JS

  методы: {//--------// ВХОД//-------- beforeEnter: function (el) {//...}, enter: function (el, done) {//... done ()}, afterEnter: function (el)  {//...}, enterCancelled: function (el) {//...},//--------//ВЫХОД//-------- beforeLeave: function (el  ) {//...}, leave: function (el, done) {//... done ()}, afterLeave: function (el) {//...}, leaveCancelled: function (el) {//...}}  

Перечисленные выше хуки можно использовать сами по себе или в сочетании с переходами/анимациями CSS

Рекомендуется, чтобы мы явно добавьте v-bind: css = «false» для переходов только для JavaScript, чтобы Vue мог пропустить обнаружение CSS. Таким образом предотвращается случайное вмешательство правил CSS в переход. Пример использования Velocity.js показан ниже:

HTML

  

Демо

JS

  new Vue ({el: '# example-4  ', данные: {show: false}, методы: {beforeEnter: function (el) {el.style.opacity = 0}, введите: function (el, done) {Velocity (el, {opacity: 1, fontSize:'  1.4em '}, {duration: 300}) Velocity (el, {fontSize:' 1em '}, {complete: done})}, leave: function (el, done) {Скорость (el, {translateX:' 15px '  , rotateZ: '50deg'}, {duration: 600}) Velocity (el, {rotateZ: '100deg'}, {loop: 2}) Velocity (el, {rotateZ: '45deg', translateY: '30px', translateX  : '30px', непрозрачность: 0}, {complete: done})}}})  

Переходы при начальном рендеринге

, если мы хотим применить переход к начальному рендерингу узла, мы можем добавить атрибут появления вот так:

      

Это будет использовать переход, указанный для вход и выход по умолчанию. Но вы можете указать пользовательские классы CSS, если хотите:

      

Как а также пользовательские перехватчики JavaScript:

      

Переход между элементами

Мы также можем переходить между необработанными элементами, используя v -if/v-else. Один из наиболее распространенных двухэлементных переходов — это переход между контейнером списка и сообщением, описывающим пустой список:

   

К сожалению, ничего не найдено.

Хотя это работает хорошо, но есть одно предостережение, о котором мы должны знать:

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

Возьмем, к примеру:

      

Мы можем использовать директиву v-bind вместо использования v-if и v- иначе:

    

Мы также можем переходить между любым количеством элементов, независимо от того, используем ли мы v-if или v-привязать отдельный элемент к динамическому свойству.

HTML

    

JS

 //... `` `  вычислено: {buttonMessage: function () {switch (this.docState) {case 'saved': return 'Edit' case 'edited': return 'Save' case 'edit': return 'Cancel'}}}   

Режимы перехода

Одновременный ввод и выход из переходов не всегда желательны, поэтому Vue предлагает несколько альтернативных режимов перехода:

  • in-out: новые элементы переходят сначала, затем, когда он завершается, текущий элемент переходит наружу.
  • out-in: текущие элементы переходят наружу сначала, затем, когда он завершится, новый элемент перейдет в.

Переход между компонентами

Переход между компонентами проще, мы не являемся ключевым атрибутом, скорее, мы обернем динамический компонент:

HTML

       

JS

  new Vue ({  el: '# transition-components-demo', data: {view: 'va'}, components: {'v-a': {template: '
Component A
'}, 'v-b ': {template:'
Компонент B
'}}})

CSS

  .component  -fade-enter-active, .component-fade-leave-active {transition: opacity .3s easy;}. component-fade-enter, .component-fade-leave-to/* .component-fade-leave-active ниже  версия 2.1.8 */{opacity: 0;}  

Переходы к списку

Итак, у нас есть управляемые переходы для:

  • отдельных узлов
  • нескольких узлов, где отображается только один узел за один раз.
  • Итак, что насчет того, что у нас есть целый список элементов для одновременного рендеринга, тогда мы будем использовать компонент . Есть несколько вещей, которые важно знать об этом компоненте, прежде чем мы погрузимся в примеры.

  • В отличие от , он отображает реальный элемент: по умолчанию. Вы можете изменить элемент, отображаемый с помощью атрибута tag.
  • Режимы перехода недоступны, потому что мы больше не чередуем взаимоисключающие элементы.
  • Элементы внутри, как правило, должен иметь уникальный ключевой атрибут.
  • Классы перехода CSS будут применяться к внутренним элементам, а не к самим группам/контейнерам.

Список переходов входа/выхода

Вот пример перехода входа и выхода с использованием классов CSS, которые мы использовали ранее:

HTML

  
{{item}}

JS

   новый Vue ({el: '# list-demo', данные: {items: [1,2,3,4,5,6,7,8,9], nextNum: 10}, методы: {randomIndex: function (  ) {  return Math.floor (Math.random () * this.items.length)}, добавить: function () {this.items.splice (this.randomIndex (), 0, this.nextNum ++)}, удалить: function ()  {this.items.splice (this.randomIndex (), 1)},}})  

CSS

  .list  -item {дисплей: встроенный блок;  margin-right: 10px;}. list-enter-active, .list-leave-active {переход: все 1s;}. list-enter,. list-leave-to/* .list-leave-active ниже версии 2.1.8 */{opacity: 0;  transform: translateY (30px);}  

В приведенном выше примере, когда мы добавляем или удаляем элемент, те, которые находятся вокруг него, мгновенно переходят на новое место вместо плавного перехода .

Переходы перемещения списка

не только анимирует вход и выход, но также меняет положение . Новая концепция, которую нам нужно знать, чтобы использовать эту функцию, — это добавление класса v-move.

HTML

  
  • {{item}}
  • JS

      новый Vue ({el: '# flip-list-demo', data: {items: [1,2,3,4,5,6,7,8,9]}, методы: {shuffle: function (  ) {this.items = _.shuffle (this.items)}}})  

    CSS

      .flip-list  -move {transition: transform 1s;}  

    Приведенный выше код можно использовать вместе с предыдущим примером кода для добавления/удаления чисел.

    HTML

        
    {{item}}

    JS

      new Vue ({el: '# list-complete  -demo ', данные: {items: [1,2,3,4,5,6,7,8,9], nextNum: 10}, методы: {randomIndex: function () {return Math.floor (Math.  random () * this.items.length)}, добавьте: function () {this.items.splice (this.randomIndex (), 0, this.nextNum ++)}, удалите: function () {this.items.splice (  this.randomIndex (), 1)}, shuffle: function () {this.items = _.shuffle (this.items)}}})  

    CSS

      .list-complete-item {переход: все единицы;  дисплей: встроенный блок;  margin-right: 10px;}. list-complete-enter, .list-complete-leave-to/* .list-complete-leave-active ниже версии 2.1.8 */{opacity: 0;  transform: translateY (30px);}. list-complete-leave-active {position: absolute;}  

    Потрясающие переходы в списке

    Это также возможно смещать переход в списке, взаимодействуя с переходом JavaScript через атрибуты данных:

    HTML

        
  • {{item.msg}}
  • JS

      новый Vue ({el: '# staggered-  list-demo ', data: {query:' ', list: [{msg:' Bruce Lee '}, {msg:' Jackie Chan '}, {msg:' Chuck Norris '}, {msg:' Jet Li '  }, {msg: 'Kung Fury'}]}, вычислено: {computedList: function () {var vm = this return t  his.list.filter (function (item) {return item.msg.toLowerCase (). indexOf (vm.query.toLowerCase ())! == -1})}}, методы: {beforeEnter: function (el) {  el.style.opacity = 0 el.style.height = 0}, введите: function (el, done) {var delay = el.dataset.index * 150 setTimeout (function () {Velocity (el, {opacity: 1,  height: '1.6em'}, {complete: done})}, delay)}, leave: function (el, done) {var delay = el.dataset.index * 150 setTimeout (function () {Скорость (el, {  непрозрачность: 0, высота: 0}, {complete: done})}, delay)}}})  

    Многоразовые переходы

    Мы можем повторно использовать переходы через систему компонентов Vue. Для этого мы создаем или в корне, а затем передаем все дочерние элементы в компонент перехода.

      Vue.component ('my-special-  transition ', {template:'         ', методы: {beforeEnter: function (el) {//...}, afterEnter: function (el) {//...}"  }})  

    Функциональные компоненты хорошо подходят для этой задачи:

      Vue.component ('my-special-transition'  , {function: true, render: function (createElement, context) {var data = {props: {name: 'very-special-transition', mode: 'out-in'}, on: {beforeEnter: function (el)  {//...}, afterEnter: function (el) {//...}}} return createElement ('переход', данные, контекст. children)}})  

    Динамические переходы

    Переходы во Vue также управляются данными. Самый простой пример динамического перехода будет связывать атрибут name с динамическим свойством.

          

    Затем мы определяем переходы/анимации CSS, используя соглашения классов переходов Vue, и хотим переключаться между ними. Любой атрибут перехода может быть динамически привязан.

    Однако окончательный способ создания динамических переходов — это использование компонентов, которые принимают реквизиты для изменения характера используемых переходов.

    Оцените статью
    nanomode.ru
    Добавить комментарий