От автора: в данном разделе мы рассмотрим, как создается во 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/[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 = “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/[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. Мы добавили appear к элементу перехода. После выполнения этого кода результат в браузере будет выглядеть следующим образом:
Анимация для компонентов
Мы можем выполнить переход для компонентов, используя следующий код. Мы использовали здесь динамичный компонент. Пример
<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>
Результат
Источник: https://www.tutorialspoint.com/
Редакция: Команда webformyself.