VueJS - переход и анимация

В этой главе мы обсудим функции перехода и анимации, доступные в VueJS.

Переход

VueJS предоставляет различные способы применения перехода к элементам HTML, когда они добавляются / обновляются в DOM. VueJS имеет встроенный компонент перехода, который нужно обернуть вокруг элемента, которому требуется переход.

Синтаксис

<transition name = "nameoftransition">
   <div></div>
</transition>

Давайте рассмотрим пример, чтобы понять работу перехода.

пример

<html>
   <head>
      <title>VueJs Instance</title>
      <script type = "text/javascript" src = "js/vue.js"></script>
   </head>
   <body>
      <style>
         .fade-enter-active, .fade-leave-active {
            transition: opacity 2s
         }
         .fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
            opacity: 0
         }
      </style>
      <div id = "databinding">
         <button v-on:click = "show = !show">Click Me</button>
         <transition name = "fade">
            <p v-show = "show" v-bind:style = "styleobj">Animation Example</p>
         </transition>
      </div>
      <script type = "text/javascript">
         var vm = new Vue({
            el: '#databinding',
            data: {
               show:true,
               styleobj :{
                  fontSize:'30px',
                  color:'red'
               }
            },
            methods : {
            }
         });
      </script>
   </body>
</html>

Создана кнопка под названием clickme, с помощью которой мы можем изменить значение переменной show с true на false и наоборот. Существуетp tagкоторый показывает текстовый элемент только в том случае, если переменная истинна. Мы обернули тег p элементом перехода, как показано в следующем фрагменте кода.

<transition name = "fade">
   <p v-show = "show" v-bind:style = "styleobj">Animation Example</p>
</transition>

Название перехода: fade. VueJS предоставляет несколько стандартных классов для перехода, и классы имеют префикс с именем перехода.

Ниже приведены некоторые стандартные классы для перехода -

  • v-enter- Этот класс вызывается изначально перед обновлением / добавлением элемента. Это начальное состояние.

  • v-enter-active- Этот класс используется для определения задержки, продолжительности и кривой замедления для входа в фазу перехода. Это активное состояние для всего, и класс доступен в течение всей начальной фазы.

  • v-leave - Добавлен при срабатывании уходящего перехода, удален.

  • v-leave-active- Применяется на этапе ухода. Он удаляется по завершении перехода. Этот класс используется для применения кривой задержки, продолжительности и замедления во время фазы выхода.

Каждый из перечисленных выше классов будет иметь префикс с именем перехода. Мы дали название переходу fade, поэтому имя классов становится.fade_enter, .fade_enter_active, .fade_leave, .fade_leave_active.

Они определены в следующем коде.

<style>
   .fade-enter-active, .fade-leave-active {
      transition: opacity 2s
   }
   .fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
      opacity: 0
   }
</style>

.Fade_enter_active и .fade_leave_active определены вместе, и он применяет переход в начальной и конечной стадиях. Свойство непрозрачности изменяется на 0 через 2 секунды.

Продолжительность определяется в файлах .fade_enter_active и .fade_leave_active. Заключительный этап определен в файлах .fade_enter, .fade_leave_to.

Отображение в браузере выглядит следующим образом.

При нажатии кнопки текст исчезнет через две секунды.

Через две секунды текст полностью исчезнет.

Рассмотрим другой пример, где есть изображение, которое смещается по оси x при нажатии кнопки.

пример

<html>
   <head>
      <title>VueJs Instance</title>
      <script type = "text/javascript" src = "js/vue.js"></script>
   </head>
   <body>
      <style>
         .shiftx-enter-active, .shiftx-leave-active {
            transition: all 2s ease-in-out;
         }
         .shiftx-enter, .shiftx-leave-to /* .fade-leave-active below version 2.1.8 */ {
            transform :  translateX(100px);
         }
      </style>
      <div id = "databinding">
         <button v-on:click = "show = !show">Click Me</button>
         <transition name = "shiftx">
            <p v-show = "show">
               <img src = "images/img.jpg" style = "width:100px;height:100px;" />
            </p>
         </transition>
      </div>
      <script type = "text/javascript">
         var vm = new Vue({
            el: '#databinding',
            data: {
               show:true
            },
            methods : {
            }
         });
      </script>
   </body>
</html>

Название перехода: shiftx. Свойство преобразования используется для смещения изображения по оси x на 100 пикселей с помощью следующего фрагмента кода.

<style>
   .shiftx-enter-active, .shiftx-leave-active {
      transition: all 2s ease-in-out;
   }
   .shiftx-enter, .shiftx-leave-to /* .fade-leave-active below version 2.1.8 */ {
      transform :  translateX(100px);
   }
</style>

Ниже приводится результат.

При нажатии кнопки изображение сдвинется на 100 пикселей вправо, как показано на следующем снимке экрана.

Анимация

Анимация применяется так же, как и переход. В анимации также есть классы, которые необходимо объявить, чтобы эффект имел место.

Давайте рассмотрим пример, чтобы увидеть, как работает анимация.

пример

<html>
   <head>
      <title>VueJs Instance</title>
      <script type = "text/javascript" src = "js/vue.js"></script>
   </head>
   <body>
      <style>
         .shiftx-enter-active {
            animation: shift-in 2s;
         }
         .shiftx-leave-active {
            animation: shift-in 2s reverse;
         }
         @keyframes shift-in {
            0%   {transform:rotateX(0deg);}
            25%  {transform:rotateX(90deg);}
            50%  {transform:rotateX(120deg);}
            75%  {transform:rotateX(180deg);}
            100% {transform:rotateX(360deg);}
         }
      </style>
      <div id = "databinding">
         <button v-on:click = "show = !show">Click Me</button>
         <transition name = "shiftx">
            <p v-show = "show">
               <img src = "images/img.jpg" style = "width:100px;height:100px;" />
            </p>
         </transition>
      </div>
      <script type = "text/javascript">
         var vm = new Vue({
            el: '#databinding',
            data: {
               show:true
            },
            methods : {
            }
         });
      </script>
   </body>
</html>

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

<transition name = "shiftx">
   <p v-show = "show"><img src = "images/img.jpg" style = "width:100px;height:100px;" /></p>
</transition>

Название перехода: shiftx. Применяемый класс выглядит следующим образом -

<style>
   .shiftx-enter-active {
      animation: shift-in 2s;
   }
   .shiftx-leave-active {
      animation: shift-in 2s reverse;
   }
   @keyframes shift-in {
      0%   {transform:rotateX(0deg);}
      25%  {transform:rotateX(90deg);}
      50%  {transform:rotateX(120deg);}
      75%  {transform:rotateX(180deg);}
      100% {transform:rotateX(360deg);}
   }
</style>

Класс имеет префикс с именем перехода, например shiftx-enter-active и .shiftx-leave-active. Анимация определяется ключевыми кадрами от 0% до 100%. Для каждого ключевого кадра определено преобразование, как показано в следующем фрагменте кода.

@keyframes shift-in {
   0%   {transform:rotateX(0deg);}
   25%  {transform:rotateX(90deg);}
   50%  {transform:rotateX(120deg);}
   75%  {transform:rotateX(180deg);}
   100% {transform:rotateX(360deg);}
}

Ниже приводится результат.

При нажатии на кнопку он поворачивается от 0 до 360 градусов и исчезает.

Пользовательские классы перехода

VueJS предоставляет список настраиваемых классов, которые можно добавить в качестве атрибутов к элементу перехода.

  • enter-class
  • enter-active-class
  • leave-class
  • leave-active-class

Пользовательские классы в основном вступают в игру, когда мы хотим использовать внешнюю библиотеку CSS, такую ​​как animate.css.

пример

<html>
   <head>
      <link href = "https://cdn.jsdelivr.net/npm/[email protected]" rel = "stylesheet" type = "text/css">
      <script type = "text/javascript" src = "js/vue.js"></script>
   </head>
   <body>
      <div id = "animate" style = "text-align:center">
         <button @click = "show = !show"><span style = "font-size:25px;">Animate</span></button>
         <transition
            name = "custom-classes-transition"
            enter-active-class = "animated swing"
            leave-active-class = "animated bounceIn">
            <p v-if = "show"><span style = "font-size:25px;">Example</span></p>
         </transition>
      </div>
      <script type = "text/javascript">
         var vm =  new Vue({
            el: '#animate',
            data: {
               show: true
            }
         });
      </script>
   </body>
</html>

Вывод

Вывод

Вывод

В приведенном выше коде применены две анимации. Один enter-active-class = «анимированные качели» и другой leave-active-class = «анимированный bounceIn». Мы используем собственные классы анимации для применения анимации из сторонней библиотеки.

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

Мы можем применить переход и анимацию к элементу с помощью VueJS. Vue ожидает события transionend и animationend, чтобы определить, выполнена ли анимация или переход.

Иногда переход может вызвать задержку. В таких случаях мы можем явно применить продолжительность следующим образом.

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

Мы можем использовать свойство duration с: на переходном элементе, как показано выше. Если необходимо указать продолжительность отдельно для входа и выхода, это можно сделать, как показано в приведенном выше фрагменте кода.

Хуки JavaScript

Классы перехода могут вызываться как методы с использованием событий JavaScript. Давайте рассмотрим пример для лучшего понимания.

пример

<html>
   <head>
      <title>VueJs Instance</title>
      <script type = "text/javascript" src = "js/vue.js"></script>
   </head>
   <body>
      <script src = "https://cdnjs.cloudflare.com/ajax/libs/velocity/1.2.3/velocity.min.js"></script>
      <div id = "example-4">
         <button @click = "show = !show">
            <span style = "font-size:25px;">Toggle</span>
         </button>
         <transition  v-on:before-enter = "beforeEnter"
            v-on:enter = "enter"
            v-on:leave = "leave"
            v-bind:css = "false">
            <p v-if = "show" style = "font-size:25px;">Animation Example with velocity</p>
         </transition>
      </div>
      <script type = "text/javascript">
         var vm = new Vue({
            el: '#example-4',
            data: {
               show: false
            },
            methods: {
               beforeEnter: function (el) {
                  el.style.opacity = 0
               },
               enter: function (el, done) {
                  Velocity(el, { opacity: 1, fontSize: '25px' }, { duration: 1000 })
                  Velocity(el, { fontSize: '10px' }, { complete: done })
               },
               leave: function (el, done) {
                  Velocity(el, { translateX: '15px', rotateZ: '50deg' }, { duration: 1500 })
                  Velocity(el, { rotateZ: '100deg' }, { loop: 2 })
                  Velocity(el, {
                     rotateZ: '45deg',
                     translateY: '30px',
                     translateX: '30px',
                     opacity: 0
                  }, { complete: done })
               }
            }
         });
      </script>
   </body>
</html>

Вывод

В приведенном выше примере мы выполняем анимацию с использованием js-методов для элемента перехода.

Методы перехода применяются следующим образом:

<transition  v-on:before-enter = "beforeEnter"
   v-on:enter = "enter"
   v-on:leave = "leave"
   v-bind:css = "false">
   <p v-if = "show" style = "font-size:25px;">Animation Example with velocity</p>
</transition>

Добавлен префикс v-onи имя события, для которого вызывается метод. Методы определены в экземпляре Vue следующим образом:

methods: {
   beforeEnter: function (el) {
      el.style.opacity = 0
   },
   enter: function (el, done) {
      Velocity(el, { opacity: 1, fontSize: '25px' }, { duration: 1000 })
      Velocity(el, { fontSize: '10px' }, { complete: done })
   },
   leave: function (el, done) {
      Velocity(el, { translateX: '15px', rotateZ: '50deg' }, { duration: 1500 })
      Velocity(el, { rotateZ: '100deg' }, { loop: 2 })
      Velocity(el, {
         rotateZ: '45deg',
         translateY: '30px',
         translateX: '30px',
         opacity: 0
      }, { complete: done })
   }
}

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

К переходу v-bind добавлено свойство: css = "false", которое сделано для того, чтобы Vue понимал, что это переход JavaScript.

Переход на начальном рендере

Чтобы добавить анимацию в начале, нам нужно добавить свойство «появляться» к элементу перехода.

Давайте посмотрим на пример, чтобы лучше понять это.

пример

<html>
   <head>
      <link href = "https://cdn.jsdelivr.net/npm/[email protected]" rel = "stylesheet" type = "text/css">
      <script type = "text/javascript" src = "js/vue.js"></script>
   </head>
   <body>
      <div id = "animate" style = "text-align:center">
         <transition
            appear
            appear-class = "custom-appear-class"
            appear-active-class = "animated bounceIn">
            <h1>BounceIn - Animation Example</h1>
         </transition>
         <transition
            appear
            appear-class = "custom-appear-class"
            appear-active-class = "animated swing">
            <h1>Swing - Animation Example</h1>
         </transition>
         <transition
            appear
            appear-class = "custom-appear-class"
            appear-active-class = "animated rubberBand">
            <h1>RubberBand - Animation Example</h1>
         </transition>
      </div>
      <script type = "text/javascript">
         var vm =  new Vue({
            el: '#animate',
            data: {
               show: true
            }
         });
      </script>
   </body>
</html>

В приведенном выше примере мы использовали три разных анимации из библиотеки animate.css. Мы добавили вид к переходному элементу.

При выполнении вышеуказанного кода в браузере будет выводиться следующее.

Анимация компонентов

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

пример

<html>
   <head>
      <title>VueJs Instance</title>
      <script type = "text/javascript" src = "js/vue.js"></script>
      <link href = "https://cdn.jsdelivr.net/npm/[email protected]" rel = "stylesheet" type = "text/css">
   </head>
   <body>
      <div id = "databinding" style = "text-align:center;">
         <transition  appear
            appear-class = "custom-appear-class"
            appear-active-class = "animated wobble">
            <component v-bind:is = "view"></component>
         </transition>
      </div>
      <script type = "text/javascript">
         var vm = new Vue({
            el: '#databinding',
            data: {
               view: 'component1'
            },
            components: {
               'component1': {
                  template: '<div><span style = "font-
                  size:25;color:red;">Animation on Components</span></div>'
               }
            }
         });
      </script>
   </body>
</html>

Вывод

ja/tutorial
es/tutorial
de/tutorial
fr/tutorial
th/tutorial
pt/tutorial
ru/tutorial
vi/tutorial
it/tutorial
ko/tutorial
tr/tutorial
id/tutorial
pl/tutorial
hi/tutorial
japost
espost
depost
frpost
thpost
ptpost
rupost
vipost
itpost
kopost
trpost
idpost
plpost
hipost

© Copyright 2021 - 2024 | All Rights Reserved