Преходите и анимациите играят важна роля в потребителското изживяване. Чрез добавяне на фини анимации и преходи между елементи на уеб страницата можете да подобрите изживяването на потребителя. Уебсайтът ще изглежда много по-плавен, по-ангажиращ и като цяло по-добър навсякъде.

Този урок демонстрира как да внедрите преходи и анимации във Vue.js. Ще научите как да създавате както прости преходи, така и сложни анимации, като използвате преход компонент и CSS ключови кадри.

Преходният компонент Vue.js

Vue.js има вграден преход компонент, който ви позволява да създавате анимации в приложението си. Този компонент се увива около целевия елемент, който искаме да анимираме.

Тук преходният компонент обгръща заглавката от ниво едно:

 Здравей </h1>
</transition>

Когато обвиете елемент с преход компонент, компонентът ще приложи преходни класове към елемента, който обгръща. Преходните паралелки са общо шест. Три контролират анимацията на елемента, докато влиза в страницата. Останалите три контролират анимацията на елемента, докато напуска страницата.

Кодът, използван в тази статия, е достъпен в това GitHub хранилище и е безплатен за използване под лиценза на MIT.

Прилагане на преходни класове, когато Elements влезе в страницата

По време на процеса на влизане на елемента в DOM, the преход компонентът прилага класовете влизам-от, влизам-до, и enter-активен към него. Тези класове ви позволяват да контролирате как елементът ще се анимира или преминава към страницата.

• влизам-от: Прилага се към елемента, преди да влезе в браузър. Вие използвате този клас, за да зададете първоначалното CSS състояние на елемента.
• влизам-до: Прилага се към елемента, когато влиза в браузъра. Вие използвате този клас, за да зададете крайното CSS състояние на елемента.
• enter-активен: Прилага се, докато елементът преминава от едно състояние в друго. Тук вие определяте колко време ще отнеме преходът.

Да видим пример:

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

С този код заглавката от ниво едно отнема две секунди, за да премине от невидим (непрозрачност: 0) до напълно видими (непрозрачност: 1). Този преход се случва, когато елементът влезе в DOM. Без прехода текстът щеше да се появи веднага в браузъра, след като страницата се зареди.

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

The преход поддържа три други преходни класа, които трябва да приложите, когато елементът напуска DOM. Имената им са напускам от, оставяне на, и остави-активен. Тези класове контролират как елементът ще анимира или ще премине от страницата.

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

Да видим пример:

<преход>
 <h1> Здравейтеh1>
преход>
.напускам от {
непрозрачност: 0;
}
.оставяне на {
непрозрачност: 1;
}
.оставете-активен {
преход: непрозрачност 2слекота;
}

В този случай заглавието от ниво едно отнема две секунди, за да премине бавно от видимо (непрозрачност: 1) до невидим (непрозрачност: 0). Този преход се случва, когато елементът напусне DOM. Без прехода текстът щеше да изчезне незабавно от браузъра.

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

Можете също да добавите a име атрибут на вашия преходен компонент. Когато направите това, Vue ще добави името към вашите преходни класове. Това означава, че можете да имате множество преходи на вашата страница, всеки с уникални класове на преход и CSS свойства.

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

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

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

За да демонстрирате прехода във Vue.js, ще обвиете an H1 в рамките на преход компонент. Отдолу, ще създадете бутон. Когато се щракне върху този бутон, той превключва променливата showTitle между невярно и вярно.

Ето кода:

След това дефинирайте сценарий раздел. Този раздел съдържа настройвам метод, където инициализирате showTitle променлива с невярно.