Kraften av Navngitte Overganger i Vue

0
5

Vue flere måter å kontrollere hvordan et element eller en komponent visuelt vises når et minnekort er satt inn i den DOM. Eksempler kan være falming i, skyve i, eller andre visuelle effekter. Nesten all denne funksjonaliteten er basert rundt en enkelt komponent: overgang komponent.

Et enkelt eksempel på dette er en enkel v-hvis basert på en Boolsk. Når den Boolske er sant, element vises. Når den Boolske er false, element forsvinner. Normalt er dette element ville bare smette inn og ut av eksistens, men med overgangen komponent du kan styre den visuelle effekten.

<overgang>
<div v-hvis=”isVisible”>er dette synlig?</div>
</overgang>

Flere artikler har blitt skrevet som dekker overgangen komponent ganske bra, som for eksempel artikler fra Sarah Drasner, Nicolas Udy, og Hassan Djirdeh. Hver artikkel dekker ulike aspekter av Vue ‘ s overgang komponent i detalj. Denne artikkelen vil bygge videre på emnet ved å fokusere på ett aspekt av overgangen komponent; det faktum at de kan være “heter.”

<overgang name=”fade”>
<div v-hvis=”isVisible”>er dette synlig?</div>
</overgang>

Det første du vil endre denne egenskapen tilbyr er at CSS-klasser injisert inn i elementet ved overgangen sekvens vil innledes med det angitte navnet. I utgangspunktet ville det være en fade-inn i stedet for v-inn fra eksemplet ovenfor. Dette enkelt attributt kan gå langt utover dette enkle alternativet. Den kan brukes til å utnytte bestemte funksjoner av Vue og CSS som gir noen interessante resultater.

En annen ting å vurdere er at navnet attributt kan være bundet:

<overgang v-bind:name=”currentTransition”>
<div v-hvis=”isVisible”>er dette synlig?</div>
</overgang>

I dette eksemplet overgangen vil bli navngitt verdien currentTransition løser. Denne enkle endringen gir et nytt nivå av alternativer og funksjoner til en app animasjoner. Med statisk og dynamisk heter overganger, et prosjekt kan ha en rekke forhåndsbygde overganger klar til å gjelde hele app, komponenter som kan forlenge eksisterende overganger gjaldt dem, slå av en overgang som brukes før eller etter å ha blitt påført, slik at brukerne kan velge overganger, og kontrollere hvordan de enkelte elementer i en liste overgang til sted, basert på den nåværende tilstand av listen.

Hensikten med denne artikkelen er å utforske disse funksjonene og forklarer hvordan du bruker dem.

Hva skjer når overganger er oppkalt?

Som standard, når en overgang komponent er brukt, det gjelder spesifikke klasser i en bestemt rekkefølge for å elementet. Disse klassene kan utnyttes i CSS. Uten CSS, disse klassene, i hovedsak, gjør ingenting for elementet. Det er derfor et behov for CSS av denne arten:

.v-inn,
.v-la – {
dekkevne: 0;
}

.v-inn-aktiv,
.v-la-active {
overgang: 0.5 s;
}

Dette fører til elementet for å fade inn og ut med en varighet på et halvt sekund. En liten endring i overgangen sørger for et elegant visuell tilbakemelding til brukeren. Likevel, det er et problem å vurdere. Men først, hva er annerledes med en navngitt overgangen?

.fade-inn,
.fade-la – {
dekkevne: 0;
}

.fade-inn-aktiv,
.fade-la-active {
overgang: 0.5 s;
}

I hovedsak det samme CSS-men med fade – prefiks i stedet for v-. Dette navngi løser potensielt problem som kan skje når du bruker standard klasse navn på overgangen komponent. V – prefiks som gjør klasser i global effekt, spesielt hvis CSS er plassert i stil blokker av appens rot-nivå. Dette ville i praksis gjøre *alle* overganger uten navn-attributtet gjennom hele appen bruke samme overgangseffekter. For små apper kan dette være tilstrekkelig, men i større, mer komplekse apps, kan det føre til uønskede visuelle effekter, som ikke alt skal fade inn og ut over et halvt sekund.

Navngiving overganger gir et nivå av kontroll for utviklere gjennom hele prosjektet for hvordan ulike deler eller komponenter som er satt inn eller fjernet visuelt. Det er foreslått at alle overganger bli navngitt — selv om det er bare en — til å etablere en vane å gjøre det. Selv om en app har bare en overgang effekt, kan det være behov for å legge til en ny en på et fremtidig tidspunkt. Etter allerede å ha navngitt eksisterende overganger i prosjektet letter arbeidet med å legge en ny.

Å bygge en samling av overgangseffekter

Navngiving overganger gir en enkel, men svært nyttig prosess. En felles praksis kan være å lage overgangen klasser som en del av den komponenten som bruker dem. Hvis en annen vanlig praksis i scoping stiler for en komponent som er gjort, disse klassene vil kun være tilgjengelig for den aktuelle komponenten. Hvis to ulike komponentene har lignende overganger i sin stil blokker, så vi er bare kopierte koden.

Så, la oss vurdere å holde CSS for overganger i stil blokker av roten av programmet, vanligvis den appen.vue-fil. For de fleste av mine prosjekter, plasserer jeg dem som den siste delen av blokk stil, noe som gjør dem enkle å finne for justeringer og tilføyelser. Å holde CSS i denne beliggenheten gjør overgangen effektene som er tilgjengelig til enhver bruk av overgangen komponent gjennom hele appen. Her er noen eksempler fra noen av mine prosjekter.

.fade-inn,
.fade-la-{ dekkevne: 0; }
.fade-inn-aktiv,
.fade-la-active { overgang: 0.5 s; }

.skyv inn {
dekkevne: 0;
forvandle: scale3d(2, 0.5, 1) translate3d(400px, 0, 0);
}

.skyv inn-{ forvandle: scale3d(1, 1, 1); }
.skyv inn-aktiv,
.slide-la-active { overgang: 0.5 s kubikk-bezier(0.68, -0.55, 0.265, 1.55); }
.slide-la { forvandle: scale3d(1, 1, 1); }

.slide-la – {
dekkevne: 0;
forvandle: scale3d(2, 0.5, 1) translate3d(-400px, 0, 0);
}

.vri-skriv inn { forvandle: perspektiv(500px) rotate3d(0, 1, 0, 90deg); }
.vri-inn-aktiv,
.vri-la-active { overgang: 0.5 s; }
.vri-la-{ forvandle: perspektiv(500px) rotate3d(0, 1, 0, -90deg); }

Det er flere måter å lagre disse overgang klasser avhengig av dine preferanser og behov i prosjektet. Den første, som nevnt tidligere, er å holde det hele i stil blokker av appen.vue-fil. Du kan også holde en Sass delvis av alle overganger i prosjektet eiendeler mappen og importere det inn i app ‘ s stil blokken.

<style lang=”scss”>
@import “eiendeler/_transitions.scss”;
</style>

Denne metoden gjør det mulig for justeringer og tillegg til innsamling av overganger utenfor Vue-filer. En annen fordel med dette oppsettet er at en slik fil kan enkelt overføres mellom prosjekter hvis de deler overgangseffekter. Hvis et prosjekt får en ny overgang, så det er lett nok til å overføre tillegg til et annet prosjekt, uten å måtte berøre main project-filer.

Hvis du bruker CSS i stedet for Sass, så du kan inkludere filen som et krav i prosjektet. Du kan oppnå dette ved å holde filen i eiendeler mappe av prosjektet, og å kreve uttalelse i main.js fil.

krever(“@/eiendeler/overganger.css”);

Et annet alternativ er å holde overgangen stiler i en statisk CSS-fil som kan lagres andre steder, enten i offentlig mappe til prosjektet eller bare på selve serveren. Siden dette er en vanlig CSS-fil, ingen bygning eller distribusjon ville være nødvendig — bare inkludere en kobling referanse i index.html fil.

<link rel=”stylesheet” type=”text/css” href=”/css/overganger.css”>

Denne filen kan også potensielt være lagret i en CDN for alle prosjekter for å dele. Når filen er oppdatert, endringene er umiddelbart tilgjengelig overalt hvor det er henvist til. Hvis en ny overgang navn er opprettet, da eksisterende prosjekter kan begynne å bruke det nye navnet som er nødvendig.

Nå, la oss bremse ned en liten

Mens vi er med å bygge en samling av overganger til å bruke hele prosjektet vårt, la oss vurdere brukere der ute som kanskje ikke ønsker brå animasjoner, eller som kanskje ønsker ingen animasjoner i det hele tatt. Noen mennesker kan vurdere vår animasjoner over-the-top og unødvendig, men for noen, de kan faktisk føre til problemer. For en tid siden, WebKit innført foretrekker-redusert-motion media query til å bistå med mulig Vestibulære Spektrum Lidelse problemer. Eric Bailey også lagt ut en fin introduksjon til media query i tillegg.

I de fleste tilfeller, å legge til media spørring som en del av vår samling av overganger er ganske enkelt og bør vurderes. Vi kan enten redusere mengden av bevegelse involvert i overgangen til å redusere de negative effektene eller er det bare å slå dem av.

Her er et enkelt eksempel fra en av mine demoer nedenfor:

.neste-skriv inn {
dekkevne: 0;
forvandle: scale3d(2, 0.5, 1) translate3d(400px, 0, 0);
}

.neste-inn-til { forvandle: scale3d(1, 1, 1); }
.neste-inn-aktiv,
.neste-la-active { overgang: 0.5 s kubikk-bezier(0.68, -0.55, 0.265, 1.55); }
.neste-la { forvandle: scale3d(1, 1, 1); }

.neste-la – {
dekkevne: 0;
forvandle: scale3d(2, 0.5, 1) translate3d(-400px, 0, 0);
}

/* Hvis animasjoner er redusert på OS-nivå, bruker enklere overganger */
@media-skjerm, og (foretrekker-redusert-bevegelse: redusere) {
.neste-skriv inn {
dekkevne: 0;
forvandle: translate3d(100px, 0, 0);
}

.neste-inn-aktiv,
.neste-la-active { overgang: 0.5 s; }

.neste-la – {
dekkevne: 0;
forvandle: translate3d(-100px, 0, 0);
}
}

I det eksempelet jeg tok det som var en ganske overdrevet overgang og gjort det enklere. Animasjonen er en side som beveger seg til venstre med en elastisk letthet, og deretter skalerer ned og forsvinner ut som den beveger seg bort. Hvis noen har redusere bevegelse preferanse sett, så animasjon blir en mye enklere overgang med en kortere distanse (som gir den en lavere hastighet) og holder den visne. Hvis vi hadde ønsket å slå dem av, så vi vil bare trenger å referere til klasser med overgangen holderen og sett verdien til ingen.

For å teste dette krever å finne og velge en avmerkingsboks på din respektive OS. På Windows, vil du finne det i Kontrollpanel > Hjelpemiddelsenter > Gjøre datamaskinen lettere å se seksjonen, se etter “Slå av alle unødvendige animasjoner (når mulig).” På en Mac, kan du se under System Preferences – > Tilgjengelighet > Vis, se etter “Redusere bevegelse.” Den nyeste iOS-enheter har en lignende innstilling under Tilgjengelighet så vel.

La oss holde fleksibel med våre overganger samling

Med denne samlingen av overganger, er det mulig ulempe av en mangel på fleksibilitet med effekter. For eksempel, hva om ett element som trenger en litt tregere fade tid? La oss si at alt annet i effekten kan være den samme, bare overgangen-varighet behov for å være annerledes. Det finnes måter å justere for at det uten at du trenger å opprette en helt ny overgang navn.

Den enkleste metoden er å bruke en innebygd stil direkte på elementet i overgangen komponent.

<overgang name=”fade”>
<div style=”overgang-varighet: 6s;” v-hvis=”isVisible”>denne har en annen varighet</div>
</overgang>

En slik endring kan også gjøres gjennom ulike måter Vue håndtering av stiler og klasser.

La oss si at du bruker komponent elementer med attributtet er for dynamiske komponenter slik som dette:

<overgang name=”fade” mode=”ut-i”>
<komponent :er=”currentComponent”></komponent>
</overgang>

Selv med denne dynamisk komponent, har vi alternativer til å justere egenskapene for overgangseffekter. Igjen kan vi bruke en innebygd stil på komponent element, som vil bli plassert på rotelementet av komponenten. Rot-element mottar også overgangen klasser, så ville vi direkte overstyre deres egenskaper.

<overgang name=”fade” mode=”ut-i”>
<komponent :er=”currentComponent” style=”overgang-varighet: 6s;”></komponent>
</overgang>

Et annet alternativ er å passere i rekvisitter til våre komponenter. På den måten, de ønskede endringene kan brukes gjennom komponenten er koden til sin rot-element.

<overgang name=”fade” mode=”ut-i”>
<komponent :er=”currentComponent” varighet=”6s”></komponent>
</overgang>
<mal>
<div :style=”`overgang-varighet: ${varighet}`”>en komponent</div>
</template>

<script>
eksport standard {
navn: “komponent-en”,
rekvisittar: {
varighet: String
}
};
</script>

Vi kan også overstyre egenskaper av overgangen klasser inne i komponenten stil blokk, spesielt hvis det er omfattet.

<style omfattet>
.fade-inn-aktiv,
.fade-la-active { overgang-varighet: 1; }
</style>

I dette tilfellet, den komponenten vil ha en fade varighet på ett sekund i stedet for den globale varighet på et halvt sekund. Vi kan også ta det et skritt videre og har ulik varighet for hver side av sekvensen.

<style omfattet>
.fade-inn-active { overgang-varighet: 1; }
.fade-la-active { overgang-varighet: 2s; }
</style>

Noen av den globale overgangen klasser kan bli endret i løpet av komponenten når det er nødvendig. Selv om dette ikke er like fleksibel som skifte eiendom utenfor en klasse struktur, kan det likevel være ganske nyttig i visse tilfeller.

Som du kan se, selv med vår samling av forhåndsbygde overganger, vi har fortsatt muligheter for fleksibilitet.

Dynamiske overganger

Selv etter alle disse interessante ting vi kan gjøre med Vue ‘ s overgang komponent, men en annen interessant funksjon som venter på å bli utforsket. Navnet attributtet på overgangen komponent kan være dynamisk i naturen, betyr at vi kan endre den gjeldende overgang i bruk.

Dette betyr at overgangen kan bli endret seg å ha forskjellig animasjon effekter med ulike situasjoner, basert i koden. For eksempel, kunne vi ha en overgang endre på grunn av svaret på et spørsmål, overganger besluttet fra bruker-interaksjon, og har en liste bruke forskjellige overganger basert på den nåværende tilstand av listen selv.

La oss se på disse tre eksemplene.

Eksempel 1: Endre overgang basert på et svar

I dette eksemplet har vi en enkel matte spørsmål som må besvares. To tallene er tilfeldig valgt, og vi er forventet å gi summen. Klikk på knappen er klikket på, for å sjekke svaret mot det forventede svaret. En liten melding vises over ligning som angir om svaret er riktig eller galt. Hvis svaret er riktig, varsel er gitt en overgang som tyder på hodet og nikket ja med en opp-og ned-animasjon. Hvis svaret er feil, varsel går side-til-side foreslå et hode risting nr.

Se Penn
VueJS Dynamiske Overganger: Endre Overgang Basert på et Svar av Travis Almand (@talmand)
på CodePen.

Logikken bak dette er ikke altfor komplisert, men det er heller oppsett av overgangen. Her er HTML:

<overgang :name=”currentTransition”>
<div id=”varsling” :klasse=”svar.toString()” v-hvis=”answerChecked”>{{ respons }}</div>
</overgang>

Ganske enkle i naturen. Vi har en bundet navn på overgangen, og deretter en v-hvis på varsling, div. Vi anvender også en sann eller usann klasse å dekorere varsling basert på svar.

Her er CSS for overganger:

.positiv-inn-active { animasjon: positiv 1s; }
@keyframes positive {
0% { forvandle: translate3d(0, 0, 0); }
25% { forvandle: translate3d(0, -20 piksler, 0); }
50% { forvandle: translate3d(0, 20 piksler, 0); }
75% { forvandle: translate3d(0, -20 piksler, 0); }
100% { forvandle: translate3d(0, 0, 0); }
}

.negativ-inn-active { animasjon: negative 1s; }
@keyframes negative {
0% { forvandle: translate3d(0, 0, 0); }
25% { forvandle: translate3d(-20 piksler, 0, 0); }
50% { forvandle: translate3d(20 piksler, 0, 0); }
75% { forvandle: translate3d(-20 piksler, 0, 0); }
100% { forvandle: translate3d(0, 0, 0); }
}

Du vil se at jeg bruker CSS-animasjoner for å oppnå den opp-og-ned og fra side-til-side-effekter.

Her er noen av JavaScript:

metoder: {
randomProblem: function () {
dette.a = Matematikk.gulv(Matematikk.tilfeldig() * Matematikk.gulv(10));
dette.b = Matematikk.gulv(Matematikk.tilfeldig() * Matematikk.gulv(10));
},
sjekk: function () {
dette.svar = dette.a + dette.b === parseInt(denne.svar);
dette.answerChecked = true;
dette.currentTransition = dette.svar ? ‘positiv’ : ‘negative’;
},
reset: function () {
dette.svar = null;
dette.answerChecked = false;
dette.randomProblem();
}
}

Det er randomProblem metode som setter opp våre ligningen. Sjekk metode som avgjør hvilke overgangseffekt som skal brukes basert på å sammenligne gitt svar med riktig svar. Så enkelt tilbakestille metode som bare, vel, nullstiller alt.

Dette er bare et enkelt eksempel. Et annet mulig eksempel er å ha en varsling som har to ulike virkninger basert på om meldingen er viktig eller ikke. Hvis meldingen ikke er altfor viktig, så vi kan ha en liten animasjon som ikke drive brukerens øyne bort fra den aktuelle oppgaven. Hvis det er viktig, vi kan bruke en animasjon som er mer direkte i naturen i et forsøk på å tvinge øynene opp for varsling.

Eksempel 2: Endre overgang basert på brukermedvirkning

En annen ting vi kan bygge er en karusell av noe slag. Dette kan være presentasjon lysbilder, et bildegalleri, eller en serie av instruksjonene. Den grunnleggende ideen er at vi har et behov for å presentere informasjon til brukeren i en sekvens. I denne presentasjonen, får brukeren til å avgjøre når du skal gå videre, og om å flytte fremover eller til å gå bakover.

Se Penn
VueJS Dynamiske Overganger: Endre Overgang Basert på brukermedvirkning av Travis Almand (@talmand)
på CodePen.

Dette, igjen, dette er en ganske enkel oppsett. For eksempel, mer eller mindre, er en lysbildepresentasjon type situasjon. De to knappene nederst skift mellom to komponenter med en glidende overgang. En ekte prosjektet ville ha flere komponenter eller kanskje logikk for å endre innholdet av komponenter basert på gjeldende lysbilde. Dette eksemplet skal bo enkel å demonstrere ideen.

Her er HTML:

<overgang :name=”currentTransition” mode=”ut-i”>
<komponent :er=”glir[currentSlide]”></komponent>
</overgang>

Du vil se at vi er bare en overgang når komponenten er slått ut av en bundet er attributt på komponent element.

Her er CSS:

.neste-skriv inn {
dekkevne: 0;
forvandle: scale3d(2, 0.5, 1) translate3d(400px, 0, 0);
}

.neste-inn-til { forvandle: scale3d(1, 1, 1); }
.neste-inn-aktiv,
.neste-la-active { overgang: 0.5 s kubikk-bezier(0.68, -0.55, 0.265, 1.55); }
.neste-la { forvandle: scale3d(1, 1, 1); }

.neste-la – {
dekkevne: 0;
forvandle: scale3d(2, 0.5, 1) translate3d(-400px, 0, 0);
}

.prev (forrige)-skriv inn {
dekkevne: 0;
forvandle: scale3d(2, 0.5, 1) translate3d(-400px, 0, 0);
}

.prev-inn-til { forvandle: scale3d(1, 1, 1); }
.prev-inn-aktiv,
.prev-la-active { overgang: 0.5 s kubikk-bezier(0.68, -0.55, 0.265, 1.55); }
.prev-la { forvandle: scale3d(1, 1, 1); }

.prev-la – {
dekkevne: 0;
forvandle: scale3d(2, 0.5, 1) translate3d(400px, 0, 0);
}

/* Hvis animasjoner er redusert på OS-nivå, bruker enklere overganger */
@media-skjerm, og (foretrekker-redusert-bevegelse: redusere) {
.neste-skriv inn { dekkevne: 0; forvandle: translate3d(100px, 0, 0); }
.neste-inn-aktiv,
.neste-la-active { overgang: 0.5 s; }
.neste-la-{ dekkevne: 0; forvandle: translate3d(-100px, 0, 0); }

.prev (forrige)-skriv inn { dekkevne: 0; forvandle: translate3d(-100px, 0, 0); }
.prev-inn-aktiv,
.prev-la-active { overgang: 0.5 s; }
.prev-la-{ dekkevne: 0; forvandle: translate3d(100px, 0, 0); }
}

Her har vi to overganger, for når brukeren klikker på “neste” – knappen og den andre er for “forrige” – knappen. Hver hovedsak lysbilder komponent i riktig retning med forvandle eiendommen, men med et par ekstra ting for å lage en slags klemme effekt for en tegneserieaktig preg. Vi også gjøre bruk av foretrekker-redusert bevegelse for å endre animasjonen til å være en enklere overgang med en liten skyve til side i den aktuelle retningen.

Nå, for JavaScript:

metoder: {
changeSlide: function (dir) {
dette.currentSlide = dir === ‘neste’ ? dette.currentSlide + 1 : dette.currentSlide – 1;
dette.currentTransition = dir;
}
}

Hver knapp kaller changeSlide metode på dens klikk på hendelsen, og går over hvilken retning det representerer. Så har vi litt logikk for å holde oversikt over hva det gjeldende lysbildet skjer for å være. En enkelt linje kontroller som overgang til bruk. Siden “neste” – knappen går du på “next” som den retning det svarer til “neste” overgang i CSS. Samme for “forrige” – knappen. Hver gang brukeren klikker på en knapp, vil programmet automatisk vet hvilke overgang til bruk. Dermed, vi har fine overgangseffekter som gir sammenheng retning som brukeren går gjennom sekvensen.

Eksempel 3: Endre overgang basert på listen staten

For vårt siste eksempel, vi får se hvordan endre overganger basert på den nåværende tilstand av en liste inne i en overgang-gruppe komponent. Ideen her er en liste for å bli oppdatert på et element i en tid med et annerledes overgang hver gang.

Se Penn
VueJS Dynamiske Overganger: Endre Overgang Basert på Listen Tilstand av Travis Almand (@talmand)
på CodePen.

I dette eksemplet, vi blir presentert med en liste over byer på høyre og en tom liste på venstre side. Som byer er valgt på høyre side, de fyller ut feltene på venstre side. Den første byen som glir inn fra over mens du glir inn i visningen. Neste byer før den siste vil gli i fra enten høyre eller venstre, avhengig av tidligere overgang, og den siste byen glir i fra nedenfor.

Her er HTML:

<overgang-gruppe :name=”currentListTransition” tag=”ul” class=”list”>
<li v-=”(element, index) i selectedItems” :key=”item”>{{ element }}</li>
</overgang-gruppe>

Som vanlig, en ganske enkel oppsett. Her er overgangene i CSS:

.topp-inn-aktiv,
.topp-la-active { overgang: 0.5 s; }
.topp-inn,
.topp-igjen-til {
dekkevne: 0;
forvandle: translate3d(0, -40px, 0);
}

.topp-flytte {
dekkevne: 0.5;
overgang: 0.5 s;
}

.venstre-inn-aktiv,
.venstre-la-active { overgang: 0.5 s; }
.venstre-inn,
.venstre-la – {
dekkevne: 0;
forvandle: translate3d(-40px, 0, 0);
}

.venstre-flytt {
dekkevne: 0.5;
overgang: 0.5 s;
}

.høyre-inn-aktiv,
.høyre-la-active { overgang: 0.5 s; }
.høyre-inn,
.høyre-la – {
dekkevne: 0;
forvandle: translate3d(40px, 0, 0);
}

.høyre-flytt {
dekkevne: 0.5;
overgang: 0.5 s;
}

.nedenfra-og-inn-aktiv,
.nedenfra-og-la-active { overgang: 0.5 s; }
.nedenfra-og-inn,
.nedenfra-og-la – {
dekkevne: 0;
forvandle: translate3d(0, 30px, 0);
}

.nederst flytte {
dekkevne: 0.5;
overgang: 0.5 s;
}

/* Hvis animasjoner er redusert på OS-nivå, må du slå av overganger */
@media-skjerm, og (foretrekker-redusert-bevegelse: redusere) {
.topp-inn-aktiv,
.topp-la-active { overgang: none; }
.topp-flytte { overgang: none; }
.venstre-inn-aktiv,
.venstre-la-active { overgang: none; }
.venstre-flytt { overgang: none; }
.høyre-inn-aktiv,
.høyre-la-active { overgang: none; }
.høyre-flytt { overgang: none; }
.nedenfra-og-inn-aktiv,
.nedenfra-og-la-active { overgang: none; }
.nederst flytte { overgang: none; }
}

Som du kan se, en overgang for hvert mulige retning av byene vises den tomme listen.

Nå, for vår JavaScript:

metoder: {
chooseCity: function (indeks) {
la selectedLength = dette.selectedItems.lengde;
la citiesLength = dette.byer.lengde;
la clt = dette.currentListTransition;

hvis (selectedLength === 0) {
clt = ‘topp’;
} else if (selectedLength > 0 && selectedLength < citiesLength – 1) {
clt = clt === ‘topp’ || clt === ‘venstre’ ? ‘høyre’ : ‘venstre’;
} else if (selectedLength === citiesLength – 1) {
clt = ‘bunnen’;
}

dette.currentListTransition = clt;
dette.selectedItems.trykk(denne.byer[index]);
dokumentet.querySelector(`.by:nth-child(${indeks + 1})`).classList.legg til(‘valgt’);
},

clearSelection: function () {
dette.currentListTransition = ‘riktig’;
dette.selectedItems = [];
dokumentet.querySelectorAll(‘.by.valgt’).forEach(element => {
elementet.classList.fjern(‘valgt’);
});
}
}

Den chooseCity metoden håndterer hva som skjer når du velger hver by. Hva om vi stort sett bryr seg om en serie av if og if/else-setninger i midten av metoden. Som byer er valgt, logikk ser på dagens lengde av selectedItems array at utvalgte byer til slutt få presset inn. Hvis lengden er null, så er det den første byen, slik at overgangen skal ha det kommet inn fra toppen. Hvis lengden er mellom null og det totale antall av våre byer liste, så overgangen skal være til høyre eller venstre. Den nye retningen som brukes er basert på den retning som forrige overgang retning. Så, til slutt, hvis vi er på den siste byen for å bli valgt, vil det endre til bunnen overgang. Igjen bruker vi foretrekker-redusert-bevegelse, i dette tilfellet for å slå av overganger helt.

Et annet alternativ for å endre overganger for en liste endrer seg i henhold til type elementer som er valgt; for eksempel øst-kysten mot vest kysten byer, hver med forskjellige overganger. Vurdere å endre overgangen basert på dagens antall elementer som er lagt til listen; for eksempel, en annen overgang for hver fem elementer.

Så lenge, og takk for alle overgangene

Etter alle disse eksempler og ideer, jeg håper at du vil vurdere å utnytte Vue ‘ s overgang komponent i dine egne prosjekter. Utforske mulighetene for å legge til overganger og animasjoner til din apps for å gi kontekst, og interesse for brukerne. I mange tilfeller, tillegg, for eksempel disse er ganske enkel å gjennomføre, nesten til det punktet at det er en skam ikke å legge dem til. Vue en spennende og svært nyttig funksjon, overgangen komponent, ut av boksen, og jeg kan bare oppfordre til sitt bruk.

Skål.