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? Это произошло потому, что мы задали такой атрибут имени для нашей анимации.
Заключение
Мы показали самый простой способ, как создается создается анимация на Vue JS при помощи CSS. Вы можете воспользоваться возможностями таблицы стилей и создать анимацию любой сложности, которая необходима. Как это все внедрить в Vue — вы уже знаете.
Анимация — это круто и смотрится очень эффектно. Но тут есть один момент — не переусердствуйте! Большое количество анимированных элементов на странице — это признак безвкусицы, и это также плохо, как и полное отсутствие этой самой анимации. Во всем нужно иметь чувство баланса. sexe24.ch
Чтобы анимация Vue JS была действительно полезна на вашем ресурсе, обратите внимание на следующие советы:
Соблюдайте баланс скорости анимации и переходов. Должно быть не очень быстро, но и не очень медленно.
Более ускоренное движение к пользователю важнее, чем медленное движение от него.
Нужно избегать анимированных переходов, которые несут раздражение и отвлеченность от основного контента сайта.
Соблюдайте «принцип симметрии». То есть если при нажатии на элемент он изменяет свое состояние или положение каком-то стиле, то при возврате элемента на место стиль должен соблюдаться, но в обратном порядке.
Размещайте анимированные элементы в местах, где пользователь фокусирует свое внимание на вашей странице, — это увеличит конверсию вашего сайта.
Другое
