Содержание
Меня легко захватывает анимация и целенаправленное движение в Сети - настолько, что я написал об этом целую статью.
Я также являюсь большим поклонником фреймворка Vue.js и уже три года создаю на нем приложения.
Поэтому я был приятно удивлен, когда понял, что могу использовать только Transition API в Vue.js, используя при этом свои неплохие навыки CSS, чтобы анимировать вход и выход компонента таким плавным образом.
Как плавно, спросите вы? Позвольте мне показать вам:
В этой статье мы создадим простое приложение для просмотра фильмов со встроенными функциями фильтрации. К концу статьи вы должны хорошо понимать встроенные компоненты <Transition> и <TransitionGroup> в Vue.js и то, как они легко справляются с анимацией входа и выхода в Vue.js.
Предварительные условия
Подождите! Прежде чем мы погрузимся в это приключение, нам понадобится несколько инструментов в нашем наборе. Эта статья рассчитана на новичков, но для того, чтобы поездка прошла гладко, вот что вам понадобится:
- Базовое понимание HTML, CSS и Javascript.
- [базовое понимание переходов и анимации в CSS] (https://www.freecodecamp.org/news/css-transition-vs-css-animation-handbook/).
- базовые знания о фреймворке Vue.js.
- Вы также можете получить доступ к приложению ”голого” фильма без переходов здесь, но только если вы думаете, что это самая скучная часть ;)
- И последнее, но не менее важное: хорошая фоновая музыка - ее вы можете выбрать сами, но всегда есть радио FreeCodeCamp.
Итак, теперь мы готовы приступить к работе.
Что такое Transition API?
Transition API в основном состоит из встроенных в Vue компонентов <Transition> и <TransitionGroup>.
Компонент <Transition> используется для анимации отдельных элементов или компонентов. В отличие от него, компонент <TransitionGroup> используется для анимирования нескольких элементов в списке в сочетании с директивой v-for в Vue.
Как добавить анимацию с помощью компонента <Transition>
Компонент <Transition> - это встроенный компонент, который обычно оборачивается вокруг любого корневого элемента или компонента для создания анимации. Анимация запускается, когда внутренний элемент или компонент показывается или скрывается с помощью обычных директив Vue, таких как v-show или v-if.
Этот компонент является ”встроенным”, поскольку для его функционирования не нужно импортировать в шаблон. Он распознается компилятором шаблонов Vue.
Мы можем попробовать это, добавив v-show в наш контейнер .header-filters и обернув контейнер компонентом <Transition>, как показано ниже:
<Переход>
<div v-show="filtersVisible" class="header-filters">
<input type="search" v-model="searchQuery" placeholder="Поиск фильмов" />
<div class="button-group">
<button @click="query = ''" :class="{ active: query === '' }">Очистить фильтры</button>.
<button @click="query = '2021'" :class="{ active: query === '2021' }">2021</button>
<button @click="query = 'Action'" :class="{ active: query === 'Action' }">Action</button>.
</div>
</div>
</Transition>
Затем мы можем завершить анимацию, включив спецификации стиля для анимации входа и выхода. Если вы знакомы с CSS Animations и Transitions, то принцип работы довольно схож. Если нет, то вот краткий краткий курс.
.v-move,
.v-enter-active,
.v-leave-active {
переход: 0.3s ease;
}
.v-enter-from,
.v-leave-to {
непрозрачность: 0;
transform: translateY(10px);
}
И теперь у вас должна быть плавная анимация для однокорневых элементов с компонентом <Transition>.
Иллюстрация эффекта компонента Transition при скрытии и отображении элемента.
Что если вы хотите получить что-то похожее на видео, которым я поделился ранее? Что-то более завораживающее? Что ж, давайте посмотрим на компонент <TransitionGroup>.
Как добавить анимацию списка с помощью компонента <TransitionGroup>
Компонент <TransitionGroup> оборачивается вокруг списка, чтобы анимировать вставку, удаление и изменение порядка элементов, которые отображаются в этом списке. Этот список обычно создается с помощью директивы v-for.
В отличие от компонента <Transition>, элементы или компоненты, обернутые в компонент <TransitionGroup>, должны иметь уникальные ключевые атрибуты.
<TransitionGroup
<MovieCard v-for="movie in filteredMovies" :key="movie.title" :movie="movie" />
</TransitionGroup>
Помимо приведенных выше инструкций, компонент <TransitionGroup> имеет аналогичный режим интеграции и работы, что и компонент <Transition>.
Как идентифицировать и называть переходы
Распространенная проблема при использовании <Transition> и <TransitionGroup> components - это наличие нескольких экземпляров этих компонентов в вашем приложении и использование различных переходов входа и выхода для конкретных экземпляров. Именно поэтому мы называем компоненты <Transition> и <TransitionGroup>.
Компоненты <Transition> и <TransitionGroup> принимают параметр name, который помогает идентифицировать и группировать переходы.
<TransitionGroup name="list">
<MovieCard v-for="movie in filteredMovies" :key="movie.title" :movie="movie" />
</TransitionGroup>
Свойство name также определяет имя класса для стилизации переходов входа и выхода, как показано ниже:
.list-move,
.list-enter-active,
.list-leave-active {
переход: 0.3s ease;
}
.list-enter-from,
.list-leave-to {
непрозрачность: 0;
transform: translateY(10px);
}
Обратите внимание, что свойство name, переданное в коде <TransitionGroup> выше, - это “list”, и оно используется в качестве префикса в стилях для переходов входа и выхода в CSS-коде выше.
Как настроить анимацию входа и выхода с помощью CSS
В этой статье мы использовали свойство CSS transition, чтобы помочь с тонкими анимациями входа и выхода. Но компоненты <Transition> и <TransitionGroup> также поддерживают свойство animation в CSS для гораздо более сложных анимаций с несколькими ключевыми кадрами.
Вот пример того, как мы можем использовать свойство animation в нашем компоненте <Transition>:
Шаблон
<Переход name="bounce">
<div v-show="filtersVisible" class="header-filters">
<input type="search" v-model="searchQuery" placeholder="Поиск фильмов" />
. . .
</div>
</Transition>
Стили
.bounce-enter-active {
анимация: bounce-in 0.5s;
}
.bounce-leave-active {
анимация: bounce-in 0.5s reverse;
}
@keyframes bounce-in {
0% {
transform: scale(0);
}
50% {
transform: scale(1.25);
}
100% {
transform: scale(1);
}
}
Если концепция ключевых кадров или свойства анимации в CSS не имеет для вас большого смысла, не стесняйтесь получить краткое введение в анимацию в CSS.
Целенаправленное движение в Интернете
В любом обсуждении веб-анимации и переходов очень важно рассмотреть вопрос ”почему”, стоящий за ними. Почему мы должны включать движение в веб-страницы, и действительно ли оно незаменимо?
Движение в Интернете служит цели, которая выходит далеко за рамки простой эстетики. Это мощный инструмент для передачи информации пользователям. Анимация может сыграть решающую роль в улучшении восприятия информации пользователями - будь то для того, чтобы поднять уровень повествования, обеспечить обратную связь с пользователями или захватить их внимание.
Прошли те времена, когда анимация добавлялась лишь в декоративных целях. В современном веб-ландшафте каждый ключевой кадр должен быть продуман с четкой целью, а пользователь всегда должен быть в центре ваших дизайнерских решений.
При этом не стоит злоупотреблять анимацией - слишком большое количество движущихся частей может отвлекать и ухудшать пользовательское восприятие. Все дело в балансе.
Заключение
Фух, это была захватывающая поездка! Надеюсь, вам понравилось. В этой статье вы узнали много нового, и мне не терпится увидеть, как вы используете эту информацию. Я буду рад узнать, если во время чтения вы создали что-то крутое.
Также не стесняйтесь заглянуть в официальную документацию Vue documentation, чтобы узнать, что еще можно сделать с помощью Transition API.
Наконец, получайте удовольствие от создания восхитительных впечатлений с помощью анимации, но всегда помните, что CSS-анимация полезна для ваших пользователей только тогда, когда она целенаправленна. Если эта статья была вам полезна, не стесняйтесь подключаться на favorfelix.com, чтобы узнать, чем еще я занимаюсь.