Overganger og animasjoner spiller en stor rolle i brukeropplevelsen. Ved å legge til subtile animasjoner og overganger mellom elementer på nettsiden, kan du forbedre brukeropplevelsen. Nettstedet vil virke mye jevnere, mer engasjerende og generelt bedre hele veien.

Denne opplæringen viser hvordan du implementerer overganger og animasjoner i Vue.js. Du lærer hvordan du lager både enkle overganger og komplekse animasjoner ved hjelp av overgang komponent- og CSS-nøkkelrammer.

Vue.js Transition Component

Vue.js har en innebygd overgang komponent som lar deg lage animasjoner i appen din. Denne komponenten går rundt målelementet som vi ønsker å animere.

Her omslutter overgangskomponenten nivå-1-overskriften:

 Hei </h1>
</transition>

Når du pakker et element med overgang komponent, vil komponenten bruke overgangsklasser til elementet som den omslutter. Det er totalt seks overgangsklasser. Tre kontrollerer animasjonen av elementet når det kommer inn på siden. De tre andre kontrollerer elementets animasjon når det forlater siden.

Koden som brukes i denne artikkelen er tilgjengelig i denne GitHub-depot og er gratis for deg å bruke under MIT-lisensen.

Bruke overgangsklasser når elementer kommer inn på siden

Under prosessen med at elementet kommer inn i DOM, vil overgang komponent gjelder klassene inn-fra, gå inn på, og enter-aktiv til det. Disse klassene lar deg kontrollere hvordan elementet skal animeres eller overføres til siden.

• inn-fra: Brukes på elementet før det kommer inn i en nettleser. Du bruker denne klassen til å angi den opprinnelige CSS-tilstanden til elementet.
• gå inn på: Brukes på elementet når det kommer inn i nettleseren. Du bruker denne klassen til å angi den endelige CSS-tilstanden til elementet.
• enter-aktiv: Brukes mens elementet går over fra en tilstand til en annen. Det er her du dikterer hvor lang tid overgangen vil ta.

La oss se et eksempel:

<overgang>
 <h1> Halloh1>
overgang>
.enter-fra {
opasitet: 0;
}
.enter-to {
opasitet: 1;
}
.enter-active {
overgang: opasitet 2sletthet;
}

Med denne koden tar nivå-1-overskriften to sekunder å gå over fra usynlig (opasitet: 0) til fullt synlig (opasitet: 1). Denne overgangen skjer når elementet går inn i DOM. Uten overgangen ville teksten dukket opp umiddelbart i nettleseren når siden laster inn.

Bruke overgangsklasser når elementer forlater siden

De overgang komponent støtter tre andre overgangsklasser som du må bruke når elementet forlater DOM. Navnene deres er permisjon fra, overlate til, og permisjonsaktiv. Disse klassene kontrollerer hvordan elementet skal animeres eller overføres fra siden.

Som du kanskje har gjettet, ligner disse klassene på Tast inn- klasser vi diskuterte tidligere. Men disse klassene aktiveres bare når elementet er i ferd med å demonteres fra DOM. Montering og avmontering er viktige konsepter for DOM. Som utvikler bør du ha en grunnleggende forståelse av DOM og andre relaterte konsepter.

La oss se et eksempel:

<overgang>
 <h1> Halloh1>
overgang>
.avreise-fra {
opasitet: 0;
}
.overlate-til {
opasitet: 1;
}
.la-aktiv {
overgang: opasitet 2sletthet;
}

I dette tilfellet tar nivå-1-overskriften to sekunder å gå sakte over fra synlig (opasitet: 1) til usynlig (opasitet: 0). Denne overgangen skjer når elementet forlater DOM. Uten overgangen ville teksten ha forsvunnet fra nettleseren umiddelbart.

Bruke overgangsnavn

Du kan også legge til en Navn attributtet til overgangskomponenten din. Når du gjør dette, vil Vue legge til navnet til overgangsklassene dine. Dette betyr at du kan ha flere overganger på siden din, hver med unike overgangsklasser og CSS-egenskaper.

For eksempel hvis du angir navnet falme på overgangskomponenten din, vil alle overgangsklassene få prefiks med falme:

<overgangNavn ="falme">
 <h1> Halloh1>
overgang>
.fade-enter-fra {
opasitet: 1;
}
.fade-leave-from {
opasitet: 1;
}
// annen "Tast inn" og "permisjon" klassermeddefalmesomprefiks

Opprette overganger ved hjelp av overgangskomponenten

For å demonstrere overgangen i Vue.js, pakker du inn en H1 innen overgang komponent. Under, oppretter du en knapp. Når denne knappen klikkes, bytter den på variabelen Vis Tittel mellom falsk og ekte.

Her er koden:

Definer deretter manus seksjon. Denne delen inneholder oppsett metoden der du initialiserer Vis Tittel variabel med falsk.