Изучите VueJS с нуля

Образование

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

Переход и анимация
Директивы
Маршрутизация

1. Переход и анимация

Переход

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

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

В качестве примера давайте посмотрим, как работает переход.

Example:
<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 Here</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>

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

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

Название перехода - затухание. VueJS предоставляет несколько стандартных классов для переходов, перед которыми стоит имя перехода.

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

V-enter — этот класс вызывается в начальной ситуации перед обновлением/добавлением элемента. Это начальное состояние.
v-enter-active — определяет задержку, продолжительность и кривую ослабления для входа в фазу перехода. В течение всей фазы ввода класс находится в активном состоянии.
v-leave — добавляется, когда запускается переход на выход, после чего удаляется.
V-leave-active —используется на этапе выхода. удаляется по завершении перехода. На этапе выхода этот класс используется для применения задержки, длительности и кривой ослабления.

Имена каждого из вышеперечисленных классов будут начинаться с имени перехода. Видя, что переход исчезает, классы теперь .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 определяются вместе. Через 2 секунды непрозрачность устанавливается на 0.

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

Ниже показано отображение в браузере.

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

Текст полностью исчезнет через две секунды. Рассмотрим другой пример, в котором нажатие кнопки смещает изображение по оси x.

Example:
<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 Here</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>

Используя следующий код, свойство преобразования используется для смещения изображения по оси 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 пикселей вправо, как показано на следующем снимке экрана.

Анимация

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

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

Example:
<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 Here</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 поддерживает список пользовательских классов, которые можно добавить в качестве атрибутов.

войти в класс
введите активный класс
выпускной класс
покинуть активный класс

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

Example:
<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 соответствует «анимированному качанию», а другой класс leave-active соответствует «анимированному bounceIn».Мы используем пользовательские классы анимации, чтобы применить анимацию из сторонней библиотеки.

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

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

Чтобы узнать больше о публикациях и узнать, смотрите эту статью.

Изучите VueJS с нуля — Часть 4

1. Переход и анимация

Переход

Анимация

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

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

Похожие вопросы