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

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

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

Переход

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

Давайте рассмотрим пример работы переходов. Пример

Фреймворк VUE JS: быстрый старт, первые результаты

Получите бесплатный курс и создайте веб-приложение на трендовой Frontend-технологии VUE JS с полного нуля

Узнать подробнее

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

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

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

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

v-leave − Добавляется при запуске или удалении перехода.

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

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

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

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

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

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

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

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

Анимация

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

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

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

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

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

Фреймворк VUE JS: быстрый старт, первые результаты

Получите бесплатный курс и создайте веб-приложение на трендовой Frontend-технологии VUE JS с полного нуля

Узнать подробнее

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

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

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

enter-class

enter-active-class

leave-class

leave-active-class

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

Результат

Результат

Результат

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

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

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

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

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

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

Результат

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

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

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

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

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

В вышеприведённом примере мы использовали три разные анимации из библиотеки animate.css. Мы добавили appear к элементу перехода. После выполнения этого кода результат в браузере будет выглядеть следующим образом:

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

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

Результат

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

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

Фреймворк VUE JS: быстрый старт, первые результаты

Получите бесплатный курс и создайте веб-приложение на трендовой Frontend-технологии VUE JS с полного нуля

Узнать подробнее

VUE JS. Быстрый старт

Практический курс по созданию веб-приложения на VUE JS с полного нуля

Получить

Метки:

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

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

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

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

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

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

Я не робот.

Spam Protection by WP-SpamFree