Az átmenetek és animációk nagy szerepet játszanak a felhasználói élményben. Finom animációk és a weboldal elemei közötti átmenetek hozzáadásával javíthatja a felhasználói élményt. A webhely sokkal gördülékenyebbnek, vonzóbbnak és általában jobbnak tűnik.

Ez az oktatóanyag bemutatja, hogyan lehet átmeneteket és animációkat megvalósítani a Vue.js-ben. Megtanulja, hogyan hozhat létre egyszerű átmeneteket és összetett animációkat a átmenet komponens és CSS kulcskockák.

A Vue.js átmeneti komponens

A Vue.js beépített átmenet összetevő, amely lehetővé teszi animációk létrehozását az alkalmazásban. Ez az összetevő körbeveszi az animálni kívánt célelemet.

Itt az átmeneti komponens becsomagolja az első szintű fejlécet:

 szia </h1>
</transition>

Amikor becsomagol egy elemet a átmenet komponens, az összetevő átmeneti osztályokat fog alkalmazni az általa burkolt elemre. Összesen hat átmeneti osztály van. Három vezérli az elem animációját, amint az oldalra lép. A másik három az elem animációját vezérli, amikor az elhagyja az oldalt.

A cikkben használt kód itt érhető el GitHub adattár és az MIT licence alapján ingyenesen használható.

Átmeneti osztályok alkalmazása, amikor az elemek belépnek az oldalra

A DOM-ba belépő elem folyamata során a átmenet komponens az osztályokat alkalmazza enter-tól, enter-to, és enter-aktív hozzá. Ezek az osztályok lehetővé teszik annak szabályozását, hogy az elem hogyan animáljon, illetve hogyan kerüljön át az oldalra.

• enter-tól: Az elemre alkalmazva, mielőtt az belépne a böngészőbe. Ezzel az osztályral állíthatja be az elem kezdeti CSS-állapotát.
• enter-to: Az elemre alkalmazva, amikor az belép a böngészőbe. Ezzel az osztályral állíthatja be az elem végső CSS-állapotát.
• enter-aktív: Akkor alkalmazzák, amikor az elem egyik állapotból a másikba vált át. Itt határozhatja meg, hogy mennyi ideig tart az átállás.

Lássunk egy példát:

<átmenet>
 <h1> Hellóh1>
átmenet>
.enter-tól {
átlátszatlanság: 0;
}
.enter-to {
átlátszatlanság: 1;
}
.enter-active {
átmenet: átlátszatlanság 2skönnyedség;
}

Ezzel a kóddal az első szintű fejléc két másodperc alatt vált át láthatatlanból (átlátszatlanság: 0) teljesen láthatóvá (átlátszatlanság: 1). Ez az átmenet akkor következik be, amikor az elem belép a DOM-ba. Az átmenet nélkül a szöveg az oldal betöltődése után azonnal megjelent volna a böngészőben.

Átmeneti osztályok alkalmazása, amikor az elemek elhagyják az oldalt

A átmenet komponens három másik átmeneti osztályt támogat, amelyeket akkor kell alkalmazni, amikor az elem elhagyja a DOM-ot. A neveik szabadság-tól, elhagyható, és aktívan hagyni. Ezek az osztályok szabályozzák, hogy az elem hogyan animálódik, illetve hogyan kerüljön át az oldalról.

Amint azt sejteni lehetett, ezek az osztályok hasonlóak a belép- osztályok, amelyeket korábban megbeszéltünk. De ezek az osztályok csak akkor aktiválódnak, amikor az elem leválasztásra készül a DOM-ról. A fel- és leszerelés a DOM fontos fogalmai. Fejlesztőként rendelkeznie kell a a DOM alapvető ismerete és más kapcsolódó fogalmak.

Lássunk egy példát:

<átmenet>
 <h1> Hellóh1>
átmenet>
.hagy-tól {
átlátszatlanság: 0;
}
.hagyni {
átlátszatlanság: 1;
}
.aktívan hagyni {
átmenet: átlátszatlanság 2skönnyedség;
}

Ebben az esetben az első szintű fejléc két másodperc alatt lassan átáll a látható (átlátszatlanság: 1) láthatatlanná (átlátszatlanság: 0). Ez az átmenet akkor következik be, amikor az elem elhagyja a DOM-ot. Az átmenet nélkül a szöveg azonnal eltűnt volna a böngészőből.

Átmeneti nevek használata

Azt is hozzáadhatja a név attribútumot az átmeneti komponenshez. Amikor ezt megteszi, a Vue hozzáfűzi a nevet az átmeneti osztályokhoz. Ez azt jelenti, hogy több átmenet is lehet az oldalon, mindegyik egyedi átmeneti osztályokkal és CSS-tulajdonságokkal.

Például, ha beállítja a nevet áttűnés az átmeneti komponensen, akkor az összes átmeneti osztály előtagja lesz áttűnés:

<átmenetnév ="áttűnés">
 <h1> Hellóh1>
átmenet>
.fade-enter-from {
átlátszatlanság: 1;
}
.fade-leave-from {
átlátszatlanság: 1;
}
// Egyéb "belép" és "elhagy" osztályokval velaáttűnésmintelőtag

Átmenetek létrehozása az Átmeneti komponens használatával

A Vue.js-ben való átmenet bemutatásához csomagoljon egy H1 belül átmenet összetevő. Alul, akkor létrehoz egy gombot. Ha erre a gombra kattintunk, átkapcsolja a változót Mutasd a címet között hamis és igaz.

Íme a kód:

Ezután határozza meg a forgatókönyv szakasz. Ez a rész tartalmazza a beállít módszer, ahol inicializálja a Mutasd a címet változóval hamis.