Den Makt som Heter Övergångar i Vue

0
27

Vue erbjuder flera olika sätt att kontrollera hur en del eller komponent som är visuellt visas när det sitter i DOM. Exempel kan vara blekning in, glider in, eller andra visuella effekter. Nästan alla av denna funktion är baserad runt en enda komponent: övergången komponent.

Ett enkelt exempel på detta är att med en enda v-om den är baserad på en Boolean. När Boolean är sant, det elementet. När Boolean false, elementet försvinner. Normalt, detta element skulle bara kika in och ut ur tillvaron, men i och med övergången komponent kan du styra den visuella effekten.

<övergången>
<div v-if=”isVisible”>märks det?</div>
</övergång>

Flera artiklar har skrivits för att täcka övergången komponent ganska bra, som artiklar från Sarah Drasner, Nicolas Udy, och Hassan Djirdeh. Varje artikel behandlar olika aspekter av Vue övergång komponent i detalj. Denna artikel kommer att expandera på ämnet genom att fokusera på en aspekt av övergången komponent, och det faktum att de kan vara “heter.”

<övergången namn=”fade”>
<div v-if=”isVisible”>märks det?</div>
</övergång>

Den inledande ändra detta attribut ger är att CSS-klasser som injiceras på elementet under övergången sekvens kommer att föregås av namnet. I princip skulle det vara fade-in i stället för v-ange från exemplet ovan. Detta attribut kan gå mycket längre än det enkla alternativet. Det kan användas för att utnyttja vissa funktioner i Vue och CSS som gör det möjligt för vissa intressanta resultat.

En annan sak att tänka på är att namnet attribut kan bindas:

<övergången v-binda namn=”currentTransition”>
<div v-if=”isVisible”>märks det?</div>
</övergång>

I detta exempel, övergången kommer att namnges värdet currentTransition beslutar. Denna enkla förändring ger en annan nivå av alternativ och funktioner för att en app animationer. Med statiska och dynamiska heter övergångar, ett projekt som kan ha en rad färdiga övergångar redo att använda hela appen, komponenter som kan förlänga befintliga övergångar tillämpas på dem, slå en övergång används före eller efter att tillämpas, gör det möjligt för användare att välja övergångar, och kontrollera hur enskilda element i en lista som övergång i stället grundas på det aktuella läget i den listan.

Denna artikel är avsedd att utforska dessa funktioner och förklara hur man använder dem.

Vad händer när övergångar heter?

Som standard, när en övergång komponent som används, det gäller specifika klasser i en specifik ordning för att elementet. Dessa klasser kan tas tillvara i CSS. Utan CSS, dessa klasser, i huvudsak, gör ingenting för elementet. Det finns därför ett behov av CSS av detta slag:

.v-ange,
.v-lämna-till {
opacitet: 0;
}

.v-in-aktiv,
.v-lämna-active {
övergång: 0.5 s.
}

Detta orsakar element för att tona in och ut med en löptid på en halv sekund. En mindre förändring för att övergången erbjuder eleganta visuell feedback till användaren. Fortfarande, det är en fråga att överväga. Men först, vad är annorlunda med en som heter övergång?

.fade-in,
.fade-lämna-till {
opacitet: 0;
}

.fade-in-aktiv,
.fade-lämna-active {
övergång: 0.5 s.
}

I huvudsak samma CSS-men med fade – som prefix istället för v-. Denna namngivning adresser de potentiella problem som kan inträffa när du använder standard klass namn av övergången komponent. V – prefix gör klasserna global effekt, särskilt om CSS är placerade i stil block av appen rot-nivå. Detta skulle i praktiken göra *alla* övergångar utan namn attribut hela appen använder samma övergångseffekt. För små appar detta kan räcka, men i större och mer komplicerade appar, kan det leda till oönskade visuella effekter, som att inte allt ska tona in och ut över en halv sekund.

Namngivning övergångar ger en nivå av kontroll för utvecklare under hela projektet för hur olika delar eller komponenter som sätts in eller tas bort visuellt. Det föreslås att alla övergångar namnges även om det är bara en — att etablera en vana att göra så. Även om en app har bara en övergång effekt, kan det finnas ett behov av att lägga till en ny man vid en framtida tidpunkt. Har redan namngivna befintliga övergångar i projektet underlättar den ansträngning för att lägga till en ny.

Bygga upp en samling av effekter av övergången till

Namngivning övergångar ger en enkel men mycket användbar process. En vanlig metod kan vara att skapa övergången klasser som en del av den komponent som använder dem. Om en annan vanlig metod för avgränsning stilar för att en komponent är gjort, dessa klasser kommer att vara tillgänglig enbart till viss del. Om två olika komponenter har liknande övergångar i sin stil block, då är vi bara upprepa kod.

Så, låt oss överväga att hålla CSS för övergångar i stil block av roten av appen, typiskt app.vue-fil. För de flesta av mina projekt, jag placera dem så som det sista avsnittet av stil blocket, vilket gör dem lätta att hitta för justeringar och tillägg. Att hålla CSS i detta läge gör övergången effekter som finns tillgängliga för att varje användning av övergången komponent i hela appen. Här är exempel från några av mina projekt.

.fade-in,
.fade-lämna-till { opacitet: 0; }
.fade-in-aktiv,
.fade-lämna-active { övergången: 0,5 s; }

.slide-in {
opacitet: 0;
förändra: scale3d(2, 0.5, 1) translate3d(400px, 0, 0);
}

.slide-in-till { transform: scale3d(1, 1, 1); }
.slide-in-aktiv,
.slide-lämna-active { övergången: 0,5 s kubik-bezier(0.68, -0.55, 0.265, 1.55); }
.slide-lämna { transform: scale3d(1, 1, 1); }

.slide-lämna-till {
opacitet: 0;
förändra: scale3d(2, 0.5, 1) translate3d(-400px, 0, 0);
}

.rotera-ange { transform: perspektiv(500px) rotate3d(0, 1, 0, 90deg); }
.rotera-in-aktiv,
.rotera-lämna-active { övergången: 0,5 s; }
.rotera-lämna-till { transform: perspektiv(500px) rotate3d(0, 1, 0, -90deg); }

Det finns flera sätt att lagra dessa övergången klasser beroende på dina önskemål och behov av projektet. Det första är, som tidigare nämnts, är att hålla det hela i stil block av appen.vue-fil. Du kan också hålla en Sass delvis av alla övergångar i projektet tillgångar mapp och importera den till app stil blocket.

<style src=”scss”>
@import “tillgångar/_transitions.scss”;
</style>

Denna metod gör det möjligt för justeringar och tillägg till den samling av övergångar utanför Vue filer. En annan fördel med denna inställning är att en sådan fil kan lätt överföras mellan projekt om de delar övergångseffekter. Om ett projekt blir en ny övergång, så är det lätt att överföra komplement till ett annat projekt utan att behöva röra projektets viktigaste filer.

Om du använder CSS istället för Sass, sedan kan du inkludera filen som ett krav i projektet. Du kan åstadkomma detta genom att hålla fil i tillgångar mapp i projektet och att placera ett uttalande kräver i main.js fil.

kräver(“@/assets/övergångar.css”);

Ett annat alternativ är att hålla övergången stilar i en statisk CSS-fil som kan sparas på andra ställen, antingen i den delade mappen för projektet eller bara på själva servern. Eftersom detta är en vanlig CSS-fil, ingen byggnad eller distribution skulle krävas — bara inkludera en länk referens i index.html fil.

<link rel=”stylesheet” type=”text/css” href=”/css/övergångar.css”>

Den här filen kan också potentiellt vara lagras i ett CDN för alla projekt att dela. När filen är uppdaterad, de förändringar som är omedelbart tillgängliga överallt det refereras till. Om en ny övergång namn är skapade, då befintliga projekt kan börja använda det nya namnet som behövs.

Nu, låt oss sakta ner en minut

Medan vi håller på att bygga en samling av övergångar för att använda hela vårt projekt, låt oss överväga användare där ute som kanske inte vill abrupt animationer, eller som kanske inte vill ha några animationer. Vissa människor kan betrakta våra animationer over-the-top och onödigt, men för vissa, de som faktiskt kan orsaka problem. För en tid sedan, WebKit infört föredrar-nedsatt rörelse media query för att hjälpa till med eventuella Vestibulära Spectrum Disorder frågor. Eric Bailey skrev också en bra introduktion till media query.

I de flesta fall, lägga till media query som en del av vår kollektion av övergångar är ganska lätt och bör övervägas. Vi kan antingen minska mängden rörelse som deltar i övergången till att minska de negativa effekter eller helt enkelt stänga av dem.

Här är ett exempel från en av mina demos nedan:

.nästa-ange {
opacitet: 0;
förändra: scale3d(2, 0.5, 1) translate3d(400px, 0, 0);
}

.nästa-in-till { transform: scale3d(1, 1, 1); }
.nästa-in-aktiv,
.nästa-semester-aktivt { övergången: 0,5 s kubik-bezier(0.68, -0.55, 0.265, 1.55); }
.nästa lämna { transform: scale3d(1, 1, 1); }

.nästa-lämna-till {
opacitet: 0;
förändra: scale3d(2, 0.5, 1) translate3d(-400px, 0, 0);
}

/* Om animationerna är nedsatt på OS-nivå, använda enklare övergångar */
@media screen och föredrar reducerade förslag: minska) {
.nästa-ange {
opacitet: 0;
förändra: translate3d(100px, 0, 0);
}

.nästa-in-aktiv,
.nästa-semester-aktivt { övergången: 0,5 s; }

.nästa-lämna-till {
opacitet: 0;
förändra: translate3d(-100px, 0, 0);
}
}

I det exempel jag tog det som var en ganska överdrivna övergången och gjort det enklare. Animation är en bild som rör sig till vänster med en elastisk lätthet, skalar ner och bleknar ut som den rör sig bort. Om någon har den minska motion företräde, sedan animation blir en mycket enklare övergång med ett kortare avstånd (vilket ger en långsammare hastighet) och håller på att blekna. Om vi hade velat att stänga av dem, då skulle vi bara refererar till klasser med övergången egendom och ställa in sitt värde till ingen.

För att testa detta kräver hitta och välja en kryssruta på era respektive OS. På Windows, du hittar det i Kontrollpanelen > Ease of Access Center > Gör datorn lättare att se avsnittet, leta reda på “inaktivera alla onödiga animeringar (om möjligt).” På en Mac, se under systeminställningar > Tillgänglighet > Display, ser för “Minska rörelse.” Den senaste iOS-enheter har en liknande inställning under Tillgänglighet.

Låt oss stanna flexibla med våra övergångar samling

Med denna samling av övergångar, det finns potential haken av en brist på flexibilitet i och med effekter. Till exempel, vad händer om ett element behöver en något långsammare fade-tid? Låt oss säga att allt annat i effekt kan förbli densamma, endast övergång-längd måste vara annorlunda. Det finns sätt att justera för att utan att behöva skapa en helt ny övergång namn.

Den enklaste metoden är att använda en inline style direkt på elementet inom övergången komponent.

<övergången namn=”fade”>
<div style=”övergång-längd: 6s;” v-if=”isVisible”>den här har en annan varaktighet</div>
</övergång>

En sådan förändring kan också ske genom olika sätt Vue erbjuder hantering av stilar och klasser.

Låt oss säga att du använder en komponent-element med attribut är för dynamiska komponenter såsom detta:

<övergången namn=”fade” – läge=””>
<komponent :är=”currentComponent”></component>
</övergång>

Även med denna dynamiska komponenten, vi har alternativ för att justera egenskaperna för en övergång i kraft. Återigen, vi kan söka en inline style på den komponent som element, som kommer att placeras på de grundläggande del av komponenten. Root-elementet får också övergången klasser, så att vi direkt skulle åsidosätta sina egenskaper.

<övergången namn=”fade” – läge=””>
<komponent :är=”currentComponent” style=”övergång-längd: 6s;”></component>
</övergång>

Ett annat alternativ är att passera i rekvisita för att våra komponenter. På det sättet, de önskade förändringarna kan tillämpas genom komponentens kod till sin root-elementet.

<övergången namn=”fade” – läge=””>
<komponent :är=”currentComponent” duration=”6″></component>
</övergång>
<mall>
<div :style=” ” övergång-längd: ${längd}`”>en komponent</div>
</template>

<script>
export standard {
namn: “komponent-en”,
rekvisita: {
varaktighet: String
}
};
</script>

Vi kan också åsidosätta egenskaper av övergången klasser inne i komponenten stil block, speciellt om det är inzoomat.

<style begränsad>
.fade-in-aktiv,
.fade-lämna-active { övergång-längd: 1s; }
</style>

I det här fallet, kommer komponenten att ha en fade varaktighet av en sekund i stället för det globala varaktighet på en halv sekund. Vi kan även ta det ett steg längre och har olika löptider för varje sida av sekvensen.

<style begränsad>
.fade-in-active { övergång-längd: 1s; }
.fade-lämna-active { övergång-längd: 2s; }
</style>

Några av den globala övergången klasser kan ändras inom komponent när det behövs. Även om det inte är lika flexibelt som att byta egendom utanför en klass struktur, kan det fortfarande vara ganska användbart i vissa situationer.

Som du kan se, även med vår samling förkompilerade övergångar, vi har fortfarande alternativ för flexibilitet.

Dynamiska övergångar

Även efter alla dessa intressanta saker vi kan göra med Vue övergång komponent, ännu ett intressant inslag väntar på att utforskas. Name attributet på övergången komponent kan vara dynamisk, vilket betyder att vi kan ändra den aktuella övergången i bruk.

Detta innebär att övergången kan ändras och har olika animation effekter med olika situationer, baserade i koden. Vi skulle till exempel kunna ha en övergång ändras på grund av svaret på en fråga, övergångar bestämde från användaren, och har en lista att använda olika övergångar baserat på det nuvarande läget på själva listan.

Låt oss titta på dessa tre exempel.

Exempel 1: Ändra övergången baserat på ett svar

I detta exempel har vi en enkel matematik fråga som måste besvaras. Två siffrorna är slumpmässigt utvalda och vi förväntas att ge den summan. Då du klickat på knappen för att kontrollera att den svarar mot det förväntade svaret. Ett litet meddelande visas ovanför den ekvation som visar om svaret är sant eller falskt. Om svaret är korrekt anmälan ges en övergång som tyder på ett huvud nickar ja med en upp och ner animation. Om ditt svar är fel, anmälan går från sida till sida vilket tyder på ett huvud att skaka inte.

Se Pennan
VueJS Dynamiska Övergångar: Ändra Övergången Baserat på ett Svar av Travis Almand (@talmand)
på CodePen.

Logiken bakom detta är inte alltför komplicerade, och inte heller är setup av övergången. Här är HTML:

<övergången :namn=”currentTransition”>
<div id=”anmälan” :class=”svar.toString()” v-if=”answerChecked”>{{ svar }}</div>
</övergång>

Ganska enkel till sin natur. Vi har en bunden namn på övergången och sedan en v-om anmälan div. Vi tillämpar även en sann eller falsk klass för att dekorera en anmälan som grundar sig på svar.

Här är CSS för övergångar:

.positivt-in-active { animation: positiva 1s; }
@keyframes positiva {
0% { transform: translate3d(0, 0, 0); }
25% { transform: translate3d(0, -20px, 0); }
50% { transform: translate3d(0, 20px, 0); }
75% { transform: translate3d(0, -20px, 0); }
100% { transform: translate3d(0, 0, 0); }
}

.negativt-in-active { animation: negativa 1s; }
@keyframes negativa {
0% { transform: translate3d(0, 0, 0); }
25% { transform: translate3d(-20px, 0, 0); }
50% { transform: translate3d(20px, 0, 0); }
75% { transform: translate3d(-20px, 0, 0); }
100% { transform: translate3d(0, 0, 0); }
}

Ser du att jag använder CSS-animationer för att åstadkomma den upp-och-ner och från sida till sida effekter.

Här är några av JavaScript:

metoder: {
randomProblem: function () {
detta.a = Matematik.våningen(Matematik.random() * Matematik.våningen(10));
detta.b = Matematik.våningen(Matematik.random() * Matematik.våningen(10));
},
in: function () {
detta.svar = detta.ett + här.b === parseInt(det här.svara);
detta.answerChecked = true;
detta.currentTransition = detta.svar? “positiva”: “negativ”;
},
reset: function () {
detta.svar = null;
detta.answerChecked = false;
detta.randomProblem();
}
}

Det är randomProblem metod som sätter upp vår ekvation. Kontrollera metod som beslutar om vilka övergångseffekter som ska användas baserat på en jämförelse ges svaret med korrekt svar. Då enkelt återställa metod som bara, ja, återställs allt.

Detta är bara ett enkelt exempel. Ett annat möjligt exempel är att ha en anmälan som har två olika effekter beroende på om anmälan är viktigt eller inte. Om meddelandet är inte alltför viktigt, då kan vi ha en subtil animation som inte kör användarens ögon bort från den aktuella uppgiften. Om det är viktigt, att vi kunde använda en animation som är mer direkt i naturen i ett försök att tvinga ögonen att anmälan.

Exempel 2: Ändra övergången baserat på användarens interaktion

En annan sak som vi kan bygga är en karusell av något slag. Detta kan vara presentationsbilder, ett bildgalleri, eller en serie av instruktioner. Den grundläggande idén är att vi har ett behov av att presentera information till användaren i en sekvens. I denna presentation får användaren att avgöra när de ska gå och om att gå vidare eller att gå bakåt.

Se Pennan
VueJS Dynamiska Övergångar: Ändra Övergången Baserat på Användarens Interaktion med Travis Almand (@talmand)
på CodePen.

Detta, återigen, är en ganska enkel installation. Som exempel, mer eller mindre, är en presentation typ av situation. De två knapparna längst ned skift mellan två komponenter med en glidande övergång. Ett riktigt projekt skulle ha fler komponenter eller kanske logik för att ändra innehållet av de komponenter som bygger på den aktuella bilden. Detta exempel ska bo enkelt att visa idé.

Här är HTML:

<övergången :namn=”currentTransition” mode=””>
<komponent :är=”objektglas[currentSlide]”></component>
</övergång>

Du kommer att se att vi bara övergår när komponenten slås ut av en bunden är attribut på den komponent som element.

Här är CSS:

.nästa-ange {
opacitet: 0;
förändra: scale3d(2, 0.5, 1) translate3d(400px, 0, 0);
}

.nästa-in-till { transform: scale3d(1, 1, 1); }
.nästa-in-aktiv,
.nästa-semester-aktivt { övergången: 0,5 s kubik-bezier(0.68, -0.55, 0.265, 1.55); }
.nästa lämna { transform: scale3d(1, 1, 1); }

.nästa-lämna-till {
opacitet: 0;
förändra: scale3d(2, 0.5, 1) translate3d(-400px, 0, 0);
}

.prev-ange {
opacitet: 0;
förändra: scale3d(2, 0.5, 1) translate3d(-400px, 0, 0);
}

.prev-in-till { transform: scale3d(1, 1, 1); }
.prev-in-aktiv,
.prev-lämna-active { övergången: 0,5 s kubik-bezier(0.68, -0.55, 0.265, 1.55); }
.prev-lämna { transform: scale3d(1, 1, 1); }

.prev-lämna-till {
opacitet: 0;
förändra: scale3d(2, 0.5, 1) translate3d(400px, 0, 0);
}

/* Om animationerna är nedsatt på OS-nivå, använda enklare övergångar */
@media screen och föredrar reducerade förslag: minska) {
.nästa-ange { opacitet: 0; transform: translate3d(100px, 0, 0); }
.nästa-in-aktiv,
.nästa-semester-aktivt { övergången: 0,5 s; }
.nästa-lämna-till { opacitet: 0; transform: translate3d(-100px, 0, 0); }

.prev-ange { opacitet: 0; transform: translate3d(-100px, 0, 0); }
.prev-in-aktiv,
.prev-lämna-active { övergången: 0,5 s; }
.prev-lämna-till { opacitet: 0; transform: translate3d(100px, 0, 0); }
}

Här har vi två övergångar, en för när användaren klickar på “nästa” – knappen och den andra är för “prev” – knappen. Varje huvudsak bilder komponent i rätt riktning med att omvandla fastigheten, men med ett par extra för att skapa en slags klämma effekt för en cartoonish känsla. Vi också göra användning av föredrar-nedsatt rörelse för att byta animation för att vara ett enklare att blekna med en liten bild till sidan i rätt riktning.

Nu, för JavaScript:

metoder: {
changeSlide: funktion (dir) {
detta.currentSlide = dir === ‘nästa’ ? detta.currentSlide + 1 : här.currentSlide – 1;
detta.currentTransition = dir;
}
}

Varje knapp kallar changeSlide metod för att klicka på händelsen och passerar vilken riktning den representerar. Då vi har en viss logik för att hålla reda på vad den aktuella bilden råkar vara. En enda rad kontroller som övergång till användning. Sedan på knappen “nästa” pass “nästa” som den i den riktning som motsvarar den “nästa” för övergången i CSS. Samma sak för “prev” – knappen. Varje gång användaren klickar på en knapp, appen automatiskt vet vilken övergång till användning. Vi har alltså en trevlig övergång effekter som att ge sammanhang i vilken riktning användaren framåt genom sekvensen.

Exempel 3: Ändra övergången baserad på listan staten

För vårt sista exempel, vi får se hur till ändra övergångar baserat på det aktuella läget i en lista inuti en övergång-gruppen komponent. Tanken här är en lista som uppdateras en post i taget med en annan övergång varje gång.

Se Pennan
VueJS Dynamiska Övergångar: Ändra Övergången Baserad på Listan Tillstånd av Travis Almand (@talmand)
på CodePen.

I detta exempel kommer vi presenteras med en lista över städer på höger och en tom lista till vänster. Städer som är valt på rätt, de fyller i de tomma fälten på vänster sida. Den första staden som glider i från ovan när bleknar i utsikt. Nästa städer innan den sista kommer att glida i, antingen från höger eller vänster, beroende på den tidigare övergången, och den sista staden bilder i från nedan.

Här är HTML:

<övergång-grupp :namn=”currentListTransition” tag=”ul” class=”list”>
<li v-for=”(objekt index) i selectedItems” :key=”item”>{{ objekt }}</li>
</övergång-grupp>

Som vanligt, en ganska enkel setup. Här är de övergångar i CSS:

.topp-in-aktiv,
.topp-lämna-active { övergången: 0,5 s; }
.topp-in,
.topp-lämna-till {
opacitet: 0;
förändra: translate3d(0, -40px, 0);
}

.topp-flytta {
opacity: 0.5;
övergång: 0.5 s.
}

.vänster-in-aktiv,
.vänster-lämna-active { övergången: 0,5 s; }
.vänster-in,
.vänster-lämna-till {
opacitet: 0;
förändra: translate3d(-40px, 0, 0);
}

.vänster-flytta {
opacity: 0.5;
övergång: 0.5 s.
}

.just-in-aktiv,
.rätt-lämna-active { övergången: 0,5 s; }
.just-in,
.rätt-lämna-till {
opacitet: 0;
förändra: translate3d(40px, 0, 0);
}

.höger-flytta {
opacity: 0.5;
övergång: 0.5 s.
}

.botten-in-aktiv,
.botten-lämna-active { övergången: 0,5 s; }
.botten-in,
.botten-lämna-till {
opacitet: 0;
förändra: translate3d(0, 30px, 0);
}

.botten-flytta {
opacity: 0.5;
övergång: 0.5 s.
}

/* Om animationerna är nedsatt på OS-nivå, stänga av övergångar */
@media screen och föredrar reducerade förslag: minska) {
.topp-in-aktiv,
.topp-lämna-active { övergången: none; }
.topp-flytta { övergången: none; }
.vänster-in-aktiv,
.vänster-lämna-active { övergången: none; }
.vänster-flytta { övergången: none; }
.just-in-aktiv,
.rätt-lämna-active { övergången: none; }
.höger-flytta { övergången: none; }
.botten-in-aktiv,
.botten-lämna-active { övergången: none; }
.botten-flytta { övergången: none; }
}

Som du kan se, en övergång för varje tänkbar riktning städer syns den tomma listan.

Nu, för vår JavaScript:

metoder: {
chooseCity: funktion (index) {
låt selectedLength = detta.selectedItems.längd.
låt citiesLength = detta.städer.längd.
låt clt = detta.currentListTransition;

om (selectedLength === 0) {
clt = ‘top’;
} else if (selectedLength > 0 && selectedLength < citiesLength – 1) {
clt = clt === ‘top’ || clt === ‘vänster’ ? ‘rätt’ : ‘vänster’;
} else if (selectedLength === citiesLength – 1) {
clt = ‘botten’;
}

detta.currentListTransition = clt;
detta.selectedItems.push(det här.städer[index]);
dokumentet.querySelector(`.stad:nth-child(${index + 1})`).classList.add(‘vald’);
},

clearSelection: function () {
detta.currentListTransition = “rätt”;
detta.selectedItems = [];
dokumentet.querySelectorAll(‘.staden.utvalda’).forEach(element => {
elementet.classList.ta bort(‘vald’);
});
}
}

Den chooseCity metod hanterar vad som händer som du väljer varje stad. Vad vi mest bryr sig om är serien om och if/else-satser i mitten av metoden. I takt med att städerna är markerade logiken ser ut på den aktuella längden på selectedItems array som den utvalda städer så småningom få skjuts in. Om längden är noll, då det är den första staden, så att övergången ska ha den kommer i från toppen. Om längden är mellan noll, och det totala antalet av våra städer-listan, sedan den övergången ska vara till höger eller vänster. Den nya riktning som används är baserat på riktningen av den tidigare övergången riktning. Då, slutligen, om vi är på sista staden att bli vald, det kommer att ändra till botten övergången. Återigen använder vi föredrar-nedsatt rörelse, i detta fall för att stänga av övergångar helt och hållet.

Ett annat alternativ för att ändra övergångar för en lista förändras beroende på vilken typ av poster som valts, till exempel östkusten mot västkusten städer, var och en med olika övergångar. Överväga att ändra övergången baserat på nuvarande antal poster att läggas till i listan, till exempel, en annan övergång för varje fem punkter.

Så länge, och tack för alla övergångar

Efter alla dessa exempel och idéer, jag hoppas att du kommer att överväga att utnyttja Vue övergång komponent i ditt eget projekt. Att utforska möjligheterna med lägga till övergångar och animationer till din apps för att ge sammanhang och intresse för dina användare. I många fall, tillägg såsom dessa är ganska enkla att genomföra, nästan till den grad av att det är en skam att inte lägga till dem. Vue erbjuder en spännande och mycket användbar funktion, övergången komponent, out of the box och jag kan bara uppmuntra dess användning.

Skål.