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

В этом руководстве показано, как реализовать переходы и анимацию в Vue.js. Вы узнаете, как создавать как простые переходы, так и сложные анимации с помощью переход компонент и ключевые кадры CSS.

Компонент перехода Vue.js

Vue.js имеет встроенный переход компонент, который позволяет создавать анимацию в вашем приложении. Этот компонент оборачивает целевой элемент, который мы хотим анимировать.

Здесь компонент перехода оборачивает заголовок первого уровня:

 Привет </h1>
</transition>

Когда вы оборачиваете элемент с помощью переход компонент, компонент будет применять классы перехода к элементу, который он обертывает. Всего существует шесть переходных классов. Три управляют анимацией элемента, когда он входит на страницу. Остальные три управляют анимацией элемента, когда он покидает страницу.

Код, используемый в этой статье, доступен в этом Репозиторий GitHub и вы можете использовать его бесплатно по лицензии MIT.

Применение классов перехода, когда элементы входят на страницу

В процессе поступления элемента в DOM переход компонент применяет классы войти из, вход в, и активный к этому. Эти классы позволяют вам управлять тем, как элемент будет анимироваться или переходить на страницу.

• войти из: применяется к элементу перед его входом в браузер. Вы используете этот класс для установки начального состояния CSS элемента.
• вход в: применяется к элементу при его входе в браузер.. Вы используете этот класс для установки конечного состояния CSS элемента.
• активный: применяется, когда элемент переходит из одного состояния в другое. Здесь вы указываете, сколько времени займет переход.

Давайте посмотрим пример:

<переход>
 <h1> Приветh1>
переход>
.enter-от {
непрозрачность: 0;
}
.enter-to {
непрозрачность: 1;
}
.enter-активный {
переход: непрозрачность 2спростота;
}

С помощью этого кода заголовку первого уровня требуется две секунды, чтобы перейти из невидимого (непрозрачность: 0) до полностью видимого (непрозрачность: 1). Этот переход происходит, когда элемент входит в DOM. Без перехода текст сразу же появился бы в браузере после загрузки страницы.

Применение классов перехода, когда элементы покидают страницу

переход Компонент поддерживает три других класса перехода, которые необходимо применять, когда элемент покидает DOM. Их зовут покидать, покинуть, и оставить активным. Эти классы управляют тем, как элемент будет анимироваться или перемещаться со страницы.

Как вы могли догадаться, эти классы аналогичны входить- классы, которые мы обсуждали ранее. Но эти классы активируются только тогда, когда элемент вот-вот размонтируется из DOM. Монтирование и размонтирование — важные концепции DOM. Как разработчик, вы должны иметь базовое понимание DOM и другие сопутствующие понятия.

Давайте посмотрим пример:

<переход>
 <h1> Приветh1>
переход>
.покидать {
непрозрачность: 0;
}
.покинуть {
непрозрачность: 1;
}
.leave-активный {
переход: непрозрачность 2спростота;
}

В этом случае заголовку первого уровня требуется две секунды, чтобы медленно перейти от видимого (непрозрачность: 1) до невидимого (непрозрачность: 0). Этот переход происходит, когда элемент покидает DOM. Без перехода текст моментально исчез бы из браузера.

Использование имен переходов

Вы также можете добавить имя атрибут вашего компонента перехода. Когда вы это сделаете, Vue добавит имя к вашим классам перехода. Это означает, что на странице может быть несколько переходов, каждый из которых имеет уникальные классы перехода и свойства CSS.

Например, если вы зададите имя тускнеть в вашем переходном компоненте, тогда все переходные классы будут иметь префикс тускнеть:

<переходимя ="тускнеть">
 <h1> Приветh1>
переход>
.fade-введите-от {
непрозрачность: 1;
}
.fade-уйти от {
непрозрачность: 1;
}
// другой "входить" и "оставлять" классысвтускнетькакпрефикс

Создание переходов с помощью компонента перехода

Чтобы продемонстрировать переход в Vue.js, вы обернете Н1 внутри переход компонент. Под, вы создадите кнопку. Когда эта кнопка нажата, она переключает переменную показать заголовок между ЛОЖЬ и истинный.

Вот код:

Далее определите сценарий раздел. Этот раздел содержит настраивать метод, в котором вы инициализируете показать заголовок переменная с ЛОЖЬ.