Přechody a animace hrají hlavní roli v uživatelské zkušenosti. Přidáním jemných animací a přechodů mezi prvky na webové stránce můžete zlepšit uživatelský zážitek. Web se bude zdát mnohem plynulejší, poutavější a celkově lepší.

Tento tutoriál ukazuje, jak implementovat přechody a animace ve Vue.js. Naučíte se vytvářet jednoduché přechody i složité animace pomocí přechod komponenty a klíčové snímky CSS.

Přechodová komponenta Vue.js

Vue.js má vestavěný přechod komponenta, která vám umožní vytvářet animace ve vaší aplikaci. Tato komponenta obtéká cílový prvek, který chceme animovat.

Zde komponenta přechodu obaluje záhlaví první úrovně:

 Dobrý den </h1>
</transition>

Když zabalíte prvek pomocí přechod komponenta, komponenta použije přechodové třídy na prvek, který obtéká. Přechodových tříd je celkem šest. Tři řídí animaci prvku při vstupu na stránku. Další tři řídí animaci prvku při opuštění stránky.

Kód použitý v tomto článku je k dispozici v tomto úložiště GitHub a můžete jej používat zdarma pod licencí MIT.

Použití přechodových tříd při vstupu prvků na stránku

Během procesu vstupu prvku do DOM se přechod komponenta aplikuje třídy vstoupit od, vstoupit do, a enter-aktivní k tomu. Tyto třídy vám umožňují řídit, jak bude prvek animovat nebo přecházet na stránku.

• vstoupit od: Použije se na prvek předtím, než vstoupí do prohlížeče. Pomocí této třídy nastavíte počáteční stav CSS prvku.
• vstoupit do: Použije se na prvek při jeho vstupu do prohlížeče. Pomocí této třídy nastavíte konečný stav CSS prvku.
• enter-aktivní: Použije se, když prvek přechází z jednoho stavu do druhého. Zde diktujete, jak dlouho bude přechod trvat.

Podívejme se na příklad:

<přechod>
 <h1> Ahojh1>
přechod>
.vstup-od {
neprůhlednost: 0;
}
.vstup do {
neprůhlednost: 1;
}
.enter-active {
přechod: neprůhlednost 2sulehčit;
}

S tímto kódem trvá záhlaví první úrovně dvě sekundy, než přejde z neviditelného (neprůhlednost: 0) plně viditelné (neprůhlednost: 1). K tomuto přechodu dojde, když prvek vstoupí do DOM. Bez přechodu by se text v prohlížeči objevil okamžitě po načtení stránky.

Použití přechodových tříd, když prvky opustí stránku

The přechod komponenta podporuje tři další přechodové třídy, které musíte použít, když prvek opouští DOM. Jejich jména jsou odejít z, opustit, a volno aktivní. Tyto třídy řídí, jak bude prvek animovat nebo přecházet ze stránky.

Jak jste možná uhodli, tyto třídy jsou podobné vstoupit- třídy, o kterých jsme hovořili dříve. Tyto třídy se však aktivují pouze tehdy, když se prvek chystá odpojit z DOM. Montáž a odpojení jsou důležité koncepty DOM. Jako vývojář byste měli mít a základní pochopení DOM a další související pojmy.

Podívejme se na příklad:

<přechod>
 <h1> Ahojh1>
přechod>
.odejít z {
neprůhlednost: 0;
}
.nechat {
neprůhlednost: 1;
}
.nechat aktivní {
přechod: neprůhlednost 2sulehčit;
}

V tomto případě záhlaví první úrovně trvá dvě sekundy, než pomalu přejde z viditelného (neprůhlednost: 1) do neviditelného (neprůhlednost: 0). K tomuto přechodu dojde, když prvek opustí DOM. Bez přechodu by text z prohlížeče okamžitě zmizel.

Použití názvů přechodů

Můžete také přidat a název atribut vaší přechodové komponentě. Když to uděláte, Vue připojí název k vašim přechodovým třídám. To znamená, že na stránce můžete mít více přechodů, každý s jedinečnými třídami přechodů a vlastnostmi CSS.

Pokud například nastavíte název slábnout na vaší přechodové komponentě budou mít všechny přechodové třídy předponu slábnout:

<přechodnázev ="slábnout">
 <h1> Ahojh1>
přechod>
.fade-enter-from {
neprůhlednost: 1;
}
.fade-leave-from {
neprůhlednost: 1;
}
// jiný "vstoupit" a "odejít" třídysaslábnouttak jakopředpona

Vytváření přechodů pomocí komponenty Transition

Chcete-li předvést přechod ve Vue.js, zabalíte soubor H1 v rámci přechod komponent. Pod, vytvoříte tlačítko. Když na toto tlačítko kliknete, přepne se proměnná ukázat nadpis mezi Nepravdivé a skutečný.

Zde je kód:

Dále definujte skript sekce. Tato sekce obsahuje založit metoda, kde inicializujete ukázat nadpis proměnná s Nepravdivé.