Vue JS — Переходы и Анимация

Vue JS — Переходы и Анимация

От автора: в данном разделе мы рассмотрим, как создается во Vue JS анимация и применяются функции переходов.

Переход

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

<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 отображает текстовый элемент только тогда, когда переменная имеет значение true. Мы обернули тэг 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 в версии ниже 2.1.8 */ {
 opacity: 0
 }
</style>

.fade_enter_active и .fade_leave_active определяются вместе, переход будет применён в начале и на этапе выхода. Свойство opacity меняется со значением 0 через 2 секунды. Продолжительность определяется в .fade_enter_active и .fade_leave_active. Заключительная фаза определяется в .fade_enter, .fade_leave_to. Вот, что отображается в браузере.

При нажатии на кнопку текст будет постепенно исчезать на протяжении 2 секунд.

Через две секунды он полностью исчезнет. Давайте рассмотрим другой пример, где присутствует изображение, и оно при нажатии на кнопку смещается по оси 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. Свойство transform используется для смещения изображения по оси x на 100px благодаря следующему коду.

<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>

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

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

Анимация

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

<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%. transform определяется для каждого из ключевых кадров, как продемонстрировано в следующем коде.

@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/animate.css@3.5.1" 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 = “animated swing”, а другая — leave-active-class = ”animated bounceIn”. Мы используем пользовательские классы анимации, чтобы анимация применялась из сторонней библиотеки.

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

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

<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-переход.

Переход на этапе начальной визуализации

Для того, чтобы добавить анимацию в начало, нам нужно добавить свойство ‘appear’ к элементу перехода. Давайте рассмотрим пример.

<html>
 <head>
 <link href = "https://cdn.jsdelivr.net/npm/animate.css@3.5.1" 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. Мы добавили appear к элементу перехода. После выполнения этого кода результат в браузере будет выглядеть следующим образом:

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

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

<html>
 <head>
 <title>VueJs Instance</title>
 <script type = "text/javascript" src = "js/vue.js"></script>
 <link href = "https://cdn.jsdelivr.net/npm/animate.css@3.5.1" 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>

Результат

Источник: https://www.tutorialspoint.com/

Редакция: Команда webformyself.

Курс по Курс по RxJS (Reactive-Extensions)

Прямо сейчас посмотрите курс по RxJS!

Смотреть курс

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree