Overgangen en animaties spelen een grote rol in de gebruikerservaring. Door subtiele animaties en overgangen tussen elementen op de webpagina toe te voegen, kunt u de gebruikerservaring verbeteren. De website zal er veel vloeiender, aantrekkelijker en over het algemeen beter uitzien.

Deze tutorial laat zien hoe je overgangen en animaties implementeert in Vue.js. U leert hoe u zowel eenvoudige overgangen als complexe animaties kunt maken met behulp van de overgang component- en CSS-hoofdframes.

De Vue.js-overgangscomponent

Vue.js heeft een ingebouwde overgang component waarmee u animaties in uw app kunt maken. Deze component wikkelt zich rond het doelelement dat we willen animeren.

Hier omhult de overgangscomponent de header van niveau één:

 Hallo </h1>
</transition>

Wanneer u een element omwikkelt met de overgang component, zal de component overgangsklassen toepassen op het element dat het inpakt. Er zijn in totaal zes overgangsklassen. Drie besturen de animatie van het element wanneer het de pagina binnenkomt. De andere drie besturen de animatie van het element wanneer het de pagina verlaat.

De code die in dit artikel wordt gebruikt, is hierin beschikbaar GitHub-opslagplaats en is gratis voor u om te gebruiken onder de MIT-licentie.

Overgangsklassen toepassen wanneer elementen de pagina binnenkomen

Tijdens het proces van het invoeren van het element in de DOM, de overgang component past de klassen toe enter-van, stap binnen in, En enter-actief eraan. Met deze klassen kunt u bepalen hoe het element wordt geanimeerd of op de pagina wordt weergegeven.

• enter-van: Toegepast op het element voordat het een browser binnenkomt. U gebruikt deze klasse om de initiële CSS-status van het element in te stellen.
• stap binnen in: Toegepast op het element wanneer het de browser binnenkomt. U gebruikt deze klasse om de uiteindelijke CSS-status van het element in te stellen.
• enter-actief: Toegepast terwijl het element overgaat van de ene staat naar de andere. Hier bepaalt u hoe lang de overgang zal duren.

Laten we een voorbeeld bekijken:

<overgang>
 <h1> Halloh1>
overgang>
.enter-van {
ondoorzichtigheid: 0;
}
.stap binnen in {
ondoorzichtigheid: 1;
}
.enter-actief {
overgang: ondoorzichtigheid 2Sgemak;
}

Met deze code duurt het twee seconden voordat de header van niveau één overgaat van onzichtbaar (ondoorzichtigheid: 0) tot volledig zichtbaar (ondoorzichtigheid: 1). Deze overgang vindt plaats wanneer het element de DOM binnengaat. Zonder de overgang zou de tekst onmiddellijk in de browser zijn verschenen zodra de pagina is geladen.

Overgangsklassen toepassen wanneer elementen de pagina verlaten

De overgang component ondersteunt drie andere overgangsklassen die u moet toepassen wanneer het element de DOM verlaat. Hun namen zijn vertrekken van, vertrekken naar, En verlof-actief. Deze klassen bepalen hoe het element van de pagina wordt geanimeerd of verplaatst.

Zoals je misschien al geraden had, zijn deze klassen vergelijkbaar met de binnenkomen- klassen die we eerder hebben besproken. Maar deze klassen worden alleen geactiveerd wanneer het element op het punt staat te ontkoppelen van de DOM. Montage en demontage zijn belangrijke concepten van de DOM. Als ontwikkelaar moet u een basiskennis van de DOM en andere gerelateerde concepten.

Laten we een voorbeeld bekijken:

<overgang>
 <h1> Halloh1>
overgang>
.vertrekken van {
ondoorzichtigheid: 0;
}
.verlof-aan {
ondoorzichtigheid: 1;
}
.verlof-actief {
overgang: ondoorzichtigheid 2Sgemak;
}

In dit geval duurt het twee seconden voordat de header van niveau één langzaam overgaat van zichtbaar (ondoorzichtigheid: 1) tot onzichtbaar (ondoorzichtigheid: 0). Deze overgang vindt plaats wanneer het element de DOM verlaat. Zonder de overgang zou de tekst onmiddellijk uit de browser zijn verdwenen.

Overgangsnamen gebruiken

Je kunt ook een toevoegen naam attribuut aan uw overgangscomponent. Wanneer u dit doet, voegt Vue de naam toe aan uw overgangsklassen. Dit betekent dat u meerdere overgangen op uw pagina kunt hebben, elk met unieke overgangsklassen en CSS-eigenschappen.

Als u bijvoorbeeld de naam instelt vervagen op uw overgangscomponent, worden alle overgangsklassen voorafgegaan door vervagen:

<overgangnaam ="vervagen">
 <h1> Halloh1>
overgang>
.fade-enter-van {
ondoorzichtigheid: 1;
}
.fade-leave-van {
ondoorzichtigheid: 1;
}
// ander "binnenkomen" En "vertrekken" klassenmetdevervagenalsvoorvoegsel

Overgangen maken met behulp van de overgangscomponent

Om de overgang in Vue.js te demonstreren, wikkel je een H1 binnen de overgang bestanddeel. Onder, maak je een knop. Wanneer op deze knop wordt geklikt, wordt de variabele omgeschakeld laat de titel zien tussen vals En WAAR.

Hier is de code:

Definieer vervolgens de script sectie. Dit gedeelte bevat de opgericht methode waarbij u de laat de titel zien variabel met vals.