Overgange og animationer spiller en stor rolle i brugeroplevelsen. Ved at tilføje subtile animationer og overgange mellem elementer på websiden kan du forbedre brugerens oplevelse. Hjemmesiden vil virke meget glattere, mere engagerende og generelt bedre hele vejen igennem.

Denne vejledning viser, hvordan man implementerer overgange og animationer i Vue.js. Du lærer, hvordan du opretter både enkle overgange og komplekse animationer ved hjælp af overgang komponent og CSS keyframes.

Vue.js-overgangskomponenten

Vue.js har en indbygget overgang komponent, der lader dig oprette animationer i din app. Denne komponent omslutter målelementet, som vi ønsker at animere.

Her omslutter overgangskomponenten niveau-1-headeren:

 Hej </h1>
</transition>

Når du vikler et element med overgang komponent, vil komponenten anvende overgangsklasser til det element, den ombryder. Der er seks overgangsklasser i alt. Tre styrer animationen af ​​elementet, når det kommer ind på siden. De tre andre styrer elementets animation, når det forlader siden.

Koden brugt i denne artikel er tilgængelig i denne GitHub-depot og er gratis for dig at bruge under MIT-licensen.

Anvendelse af overgangsklasser, når elementer kommer ind på siden

Under processen med at elementet kommer ind i DOM, vil overgang komponent anvender klasserne ind-fra, gå ind til, og enter-aktiv til det. Disse klasser giver dig mulighed for at kontrollere, hvordan elementet animeres eller overføres til siden.

• ind-fra: Anvendt på elementet, før det kommer ind i en browser. Du bruger denne klasse til at indstille den oprindelige CSS-tilstand for elementet.
• gå ind til: Anvendt på elementet, når det kommer ind i browseren. Du bruger denne klasse til at indstille elementets endelige CSS-tilstand.
• enter-aktiv: Anvendes, mens elementet skifter fra en tilstand til en anden. Det er her, du dikterer, hvor lang tid overgangen vil tage.

Lad os se et eksempel:

<overgang>
 <h1> Hejh1>
overgang>
.indtast-fra {
Gennemsigtighed: 0;
}
.enter-to {
Gennemsigtighed: 1;
}
.enter-active {
overgang: Gennemsigtighed 2slethed;
}

Med denne kode tager niveau-1-headeren to sekunder at skifte fra usynlig (opacitet: 0) til fuldt synlig (opacitet: 1). Denne overgang sker, når elementet kommer ind i DOM. Uden overgangen ville teksten have vist sig med det samme i browseren, når siden indlæses.

Anvendelse af overgangsklasser, når elementer forlader siden

Det overgang komponent understøtter tre andre overgangsklasser, som du skal anvende, når elementet forlader DOM. Deres navne er orlov fra, overladelse til, og orlovsaktiv. Disse klasser styrer, hvordan elementet animeres eller overføres fra siden.

Som du måske har gættet, ligner disse klasser gå ind- klasser, vi diskuterede tidligere. Men disse klasser aktiveres kun, når elementet er ved at afmonteres fra DOM. Montering og afmontering er vigtige begreber i DOM. Som udvikler bør du have en grundlæggende forståelse af DOM og andre relaterede begreber.

Lad os se et eksempel:

<overgang>
 <h1> Hejh1>
overgang>
.afrejse-fra {
Gennemsigtighed: 0;
}
.overlade til {
Gennemsigtighed: 1;
}
.leave-active {
overgang: Gennemsigtighed 2slethed;
}

I dette tilfælde tager niveau-1-headeren to sekunder om langsomt at skifte fra synlig (opacitet: 1) til usynlig (opacitet: 0). Denne overgang sker, når elementet forlader DOM. Uden overgangen ville teksten være forsvundet fra browseren med det samme.

Brug af overgangsnavne

Du kan også tilføje en navn attribut til din overgangskomponent. Når du gør dette, tilføjer Vue navnet til dine overgangsklasser. Det betyder, at du kan have flere overgange på din side, hver med unikke overgangsklasser og CSS-egenskaber.

For eksempel, hvis du angiver navnet falme på din overgangskomponent, så vil alle overgangsklasserne blive præfikset med falme:

<overgangnavn ="falme">
 <h1> Hejh1>
overgang>
.fade-enter-fra {
Gennemsigtighed: 1;
}
.fade-leave-fra {
Gennemsigtighed: 1;
}
// Andet "gå ind" og "forlade" klassermeddetfalmesompræfiks

Oprettelse af overgange ved hjælp af overgangskomponenten

For at demonstrere overgangen i Vue.js skal du indpakke en H1 indenfor overgang komponent. Under, opretter du en knap. Når der klikkes på denne knap, skifter den variablen showTitel mellem falsk og rigtigt.

Her er koden:

Dernæst skal du definere manuskript afsnit. Dette afsnit indeholder Opsætning metode, hvor du initialiserer showTitel variabel med falsk.