Prechody a animácie zohrávajú hlavnú úlohu v používateľskej skúsenosti. Pridaním jemných animácií a prechodov medzi prvkami na webovej stránke môžete zlepšiť používateľský zážitok. Webová stránka sa bude zdať oveľa plynulejšia, pútavejšia a celkovo lepšia.

Tento tutoriál ukazuje, ako implementovať prechody a animácie vo Vue.js. Naučíte sa vytvárať jednoduché prechody aj zložité animácie pomocou prechod komponenty a kľúčové snímky CSS.

Komponent prechodu Vue.js

Vue.js má vstavaný prechod komponent, ktorý vám umožňuje vytvárať animácie vo vašej aplikácii. Tento komponent obopína cieľový prvok, ktorý chceme animovať.

Tu komponent prechodu obalí hlavičku prvej úrovne:

 Dobrý deň </h1>
</transition>

Keď obalíte prvok s prechod komponent, komponent použije prechodové triedy na prvok, ktorý obalí. Prechodových tried je celkovo šesť. Tri ovládajú animáciu prvku pri jeho vstupe na stránku. Ďalšie tri ovládajú animáciu prvku pri opúšťaní stránky.

Kód použitý v tomto článku je dostupný v tomto úložisko GitHub a môžete ho bezplatne používať na základe licencie MIT.

Použitie prechodových tried pri vstupe prvkov na stránku

Počas procesu vstupu prvku do DOM, prechod komponent aplikuje triedy vstúpiť od, vstúpiť do, a enter-active k tomu. Tieto triedy vám umožňujú ovládať, ako bude prvok animovať alebo prechádzať na stránku.

• vstúpiť od: Použije sa na prvok predtým, ako vstúpi do prehliadača. Túto triedu používate na nastavenie počiatočného stavu CSS prvku.
• vstúpiť do: Použije sa na prvok pri vstupe do prehliadača. Túto triedu používate na nastavenie konečného stavu CSS prvku.
• enter-active: Použije sa, keď prvok prechádza z jedného stavu do druhého. Tu diktujete, ako dlho bude prechod trvať.

Pozrime sa na príklad:

<prechod>
 <h1> Ahojh1>
prechod>
.vstup-od {
nepriehľadnosť: 0;
}
.vstup do {
nepriehľadnosť: 1;
}
.enter-active {
prechod: nepriehľadnosť 2sľahkosť;
}

S týmto kódom trvá prechod hlavičky prvej úrovne dve sekundy z neviditeľného (nepriehľadnosť: 0) úplne viditeľné (nepriehľadnosť: 1). Tento prechod nastane, keď prvok vstúpi do DOM. Bez prechodu by sa text v prehliadači objavil okamžite po načítaní stránky.

Použitie prechodových tried, keď prvky opustia stránku

The prechod komponent podporuje tri ďalšie prechodové triedy, ktoré musíte použiť, keď prvok opúšťa DOM. Ich mená sú odísť z, opustiť, a voľno aktívny. Tieto triedy určujú, ako bude prvok animovať alebo prechádzať zo stránky.

Ako ste možno uhádli, tieto triedy sú podobné triede vstúpiť- triedy, o ktorých sme hovorili predtým. Ale tieto triedy sa aktivujú iba vtedy, keď sa prvok chystá odpojiť z DOM. Montáž a demontáž sú dôležité koncepty DOM. Ako vývojár by ste mali mať a základné pochopenie DOM a ďalšie súvisiace pojmy.

Pozrime sa na príklad:

<prechod>
 <h1> Ahojh1>
prechod>
.odísť z {
nepriehľadnosť: 0;
}
.nechať {
nepriehľadnosť: 1;
}
.nechať aktívny {
prechod: nepriehľadnosť 2sľahkosť;
}

V tomto prípade hlavičke prvej úrovne trvá dve sekundy, kým pomaly prejde z viditeľného (nepriehľadnosť: 1) do neviditeľného (nepriehľadnosť: 0). Tento prechod nastane, keď prvok opustí DOM. Bez prechodu by text z prehliadača okamžite zmizol.

Používanie názvov prechodov

Môžete tiež pridať a názov atribút vášho prechodového komponentu. Keď to urobíte, Vue pripojí názov k vašim prechodovým triedam. To znamená, že na stránke môžete mať viacero prechodov, každý s jedinečnými triedami prechodov a vlastnosťami CSS.

Napríklad, ak nastavíte názov vyblednúť na vašom prechodovom komponente budú mať predponu všetky prechodové triedy vyblednúť:

<prechodnázov ="vyblednúť">
 <h1> Ahojh1>
prechod>
.fade-enter-from {
nepriehľadnosť: 1;
}
.vyblednúť-odísť-od {
nepriehľadnosť: 1;
}
// iné "vstúpiť" a "odísť" triedysnavyblednúťakopredpona

Vytváranie prechodov pomocou komponentu prechodu

Ak chcete demonštrovať prechod vo Vue.js, zabalíte súbor H1 v rámci prechod komponent. Zospodu, vytvoríte tlačidlo. Po kliknutí na toto tlačidlo sa premenná prepne showTitle medzi falošné a pravda.

Tu je kód:

Ďalej definujte skript oddiele. Táto sekcia obsahuje nastaviť metóda, kde inicializujete showTitle variabilný s falošné.