Vue JS анимация – это отличный вариант сделать frontend вашей разработки живее,
современнее, интереснее и удобнее для ваших пользователей. Тем более, что
делается все буквально за несколько минут и без особых усилий.
Анимация на сайте очень важна. Люди привыкли к постоянной динамике. Поэтому на
сайтах, если ничего не двигается, то выглядит это очень скучно и не привлекательно.
А цель любой анимации — это привлечь и задержать потенциального клиента на
вашем веб-сайте. Поэтому не нужно упускать этот инструмент взаимодействия с
вашими клиентами, потому что это не просто украшение, а:
- захват внимания вашего пользователя;
- возможность выделить важную информацию;
- возможность провести пользователя по вашей странице, так как нужно вам;
- повышение собственной ценности и ценности вашего бренда.
В целом, любая анимация призвана повышать конверсию вашего ресурса. Поэтому
неважно для чего рассчитан ваш ресурс, анимация для него — это беспроигрышный
вариант это сделать.
Vue JS анимация
Vue JS анимация в вашем проекте может быть реализована 3-мя способами:
- CSS анимация.
- Перехват JS и внесение изменений в DOM.
- Подключение сторонних библиотек.
Каждый из способов отличается собственной сложностью и потребует от вас
соответствующих знаний. К примеру, если у вас небольшой опыт в
программировании, но вы хорошо знакомы с HTML+CSS, то первый способ для вас
идеален. А если у вас достаточно опыта и вы, к примеру, перешли на Vue из React,
то лучшим способом для вас будет – редактирование DOM «руками».
Сегодня мы поговорим о самом простом способе — добавление анимации при
помощи CSS.
Vue JS анимация: начало
Для начала нужно знать, что в Vue JS анимация возможна с использованием тега
<transition>, который собственно и оборачивает элемент страницы, который нужно
анимировать. Применение этого тега автоматически добавляет несколько классов,
для того чтобы контролировать анимацию на ее разных этапах.
Классы для Vue JS анимации:
- v-enter-from / v-leave-from — контролируют стартовое состояние анимации;
- v-enter-active / v-leave-active — контролируют активное состояние анимации;
- v-enter-to / v-leave-to — контролируют конечное состояние анимации.
Нужно отметить, что перечисленные классы заданы по умолчанию. А когда вы
задаете вашей анимации атрибут имени, то классы будут выглядеть следующим
образом: Имя_анимации-enter-to и т. п.
Vue JS анимация: пример
Как мы уже говорили, создать анимацию на Vue не сложно и требует немного
времени. Для начала вам нужно выбрать элемент, которому хотите задать анимацию
и обернуть его в тег <transition>.
Давайте покажем на примере кнопки на странице сайта:
<body>
<div>
<h1> Анимация Vue JS </h1>
<button @click=’open = !open’> Toggle Animation </button>
<transition name=”ani_fade”>
<p v-if=’open’ class=’example-div’>
Привет, мир!
</p>
</transition>
</div>
</body>
Также необходимо добавить на страницу следующий скрипт в соответствующий
раздел или документ:
import { ref } from ‘vue’
export default {
setup () {
const open = ref(true)
return {
open
}
}
}
Теперь, чтобы все заработало, нужно будет добавить соответствующие CSS-стили.
Стили добавляются туда, где расположены остальные стили документа: либо на
страницу, либо в отдельный документ.
Пример CSS стилей:
.ani_fade-enter-active,
.ani_fade-leave-active {
transition: opacity 0.5s ease;
}
.ani_fade-enter-from,
.ani_fade-leave-to {
opacity: 0;
}
Вы заметили, как у наших классов добавился префикс ani_fade, это
произошло потому что мы задали такой атрибут имени для нашей
анимации.
Возможно вам будет интересно почитать статью “Протокол IPV6 недоступен: как это исправить?
Заключение
Мы показали самый простой способ, как создается создается анимация на Vue JS
при помощи CSS. Вы можете воспользоваться возможностями таблицей стилей и
создать анимацию любой сложности, которая необходима. Как это все внедрить в
Vue вы уже знаете.
Анимация — это круто и смотрится очень эффективно. Но тут есть один один момент
— не переусердствуйте! Большое количество анимированных элементов на
странице — это признак безвкусицы и это также плохо, как и полное отсутствие этой
самой анимации. Во всем нужно иметь чувство баланса.
Чтобы анимация Vue JS была действительно полезна на вашем ресурсе, обратите
внимания на следующие советы:
- Соблюдайте баланс скорости анимации и переходов. Должно быть не очень
быстро, но и не очень медленно. - Более ускоренное движение к пользователю важнее, чем медленное
движение от него. - Нужно избегать анимированных переходов, которые несут раздражение и
отвлеченность от основного контента сайта. - Соблюдайте «принцип симметрии». То есть, если при нажатии на элемент он
изменяет свое состояние или положение каком-то стиле, то при возврате
элемента на место стиль должен соблюдаться, но в обратном порядке. - Размещайте анимировнаные элементы в местах, где пользователь
фокусирует свое внимание на вашей странице — это увеличит конверсию
вашего сайта.