Övergångar och animationer spelar en stor roll i användarupplevelsen. Genom att lägga till subtila animationer och övergångar mellan element på webbsidan kan du förbättra användarens upplevelse. Webbplatsen kommer att verka mycket smidigare, mer engagerande och generellt sett bättre.

Denna handledning visar hur man implementerar övergångar och animationer i Vue.js. Du kommer att lära dig hur du skapar både enkla övergångar och komplexa animationer med hjälp av övergång komponent- och CSS-nyckelrutor.

Vue.js Transition Component

Vue.js har en inbyggd övergång komponent som låter dig skapa animationer i din app. Den här komponenten omsluter målelementet som vi vill animera.

Här omsluter övergångskomponenten nivå ett-rubriken:

 Hej </h1>
</transition>

När du lindar ett element med övergång komponent, kommer komponenten att tillämpa övergångsklasser på elementet som den omsluter. Det finns sex övergångsklasser totalt. Tre styr animeringen av elementet när det kommer in på sidan. De andra tre styr elementets animering när det lämnar sidan.

Koden som används i den här artikeln är tillgänglig i denna GitHub-förråd och är gratis för dig att använda under MIT-licensen.

Tillämpa övergångsklasser när element kommer in på sidan

Under processen för elementet att komma in i DOM, övergång komponent tillämpar klasserna gå in-från, gå in på, och enter-aktiv till det. Dessa klasser låter dig styra hur elementet ska animeras eller överföras till sidan.

• gå in-från: Tillämpas på elementet innan det går in i en webbläsare. Du använder den här klassen för att ställa in det initiala CSS-tillståndet för elementet.
• gå in på: Tillämpas på elementet när det kommer in i webbläsaren. Du använder den här klassen för att ställa in det slutliga CSS-tillståndet för elementet.
• enter-aktiv: Tillämpas medan elementet övergår från ett tillstånd till ett annat. Det är här du bestämmer hur lång tid övergången kommer att ta.

Låt oss se ett exempel:

<övergång>
 <h1> Hallåh1>
övergång>
.enter-från {
opacitet: 0;
}
.enter-to {
opacitet: 1;
}
.enter-active {
övergång: opacitet 2slätthet;
}

Med den här koden tar nivå-1-huvudet två sekunder att övergå från osynlig (opacitet: 0) till fullt synlig (opacitet: 1). Denna övergång sker när elementet går in i DOM. Utan övergången skulle texten ha dykt upp direkt i webbläsaren när sidan laddas.

Tillämpa övergångsklasser när element lämnar sidan

De övergång komponenten stöder tre andra övergångsklasser som du måste tillämpa när elementet lämnar DOM. Deras namn är lämna från, lämna till, och ledighetsaktiv. Dessa klasser styr hur elementet kommer att animeras eller överföras från sidan.

Som du kanske har gissat liknar dessa klasser stiga på- klasser som vi diskuterade tidigare. Men dessa klasser aktiveras bara när elementet är på väg att avmonteras från DOM. Montering och avmontering är viktiga begrepp för DOM. Som utvecklare bör du ha en grundläggande förståelse för DOM och andra relaterade begrepp.

Låt oss se ett exempel:

<övergång>
 <h1> Hallåh1>
övergång>
.lämna från {
opacitet: 0;
}
.lämna till {
opacitet: 1;
}
.leave-active {
övergång: opacitet 2slätthet;
}

I det här fallet tar nivå ett-huvudet två sekunder att långsamt övergå från synligt (opacitet: 1) till osynlig (opacitet: 0). Denna övergång sker när elementet lämnar DOM. Utan övergången skulle texten ha försvunnit från webbläsaren direkt.

Använda övergångsnamn

Du kan också lägga till en namn attribut till din övergångskomponent. När du gör detta kommer Vue att lägga till namnet till dina övergångsklasser. Det betyder att du kan ha flera övergångar på din sida, var och en med unika övergångsklasser och CSS-egenskaper.

Till exempel om du anger namnet blekna på din övergångskomponent kommer alla övergångsklasser att ha prefix blekna:

<övergångnamn ="blekna">
 <h1> Hallåh1>
övergång>
.fade-enter-from {
opacitet: 1;
}
.fade-leave-from {
opacitet: 1;
}
// Övrig "stiga på" och "lämna" klassermeddebleknasomprefix

Skapa övergångar med hjälp av övergångskomponenten

För att demonstrera övergången i Vue.js, lindar du en H1 inom övergång komponent. Under, skapar du en knapp. När den här knappen klickas växlar den variabeln visa titel mellan falsk och Sann.

Här är koden:

Därefter definierar du manus sektion. Det här avsnittet innehåller uppstart metod där du initierar visa titel variabel med falsk.