De Kracht van de Naam van Overgangen in Vue

0
16

Vue biedt verschillende manieren om te bepalen hoe een element of onderdeel visueel wordt weergegeven wanneer ingevoegd in de DOM. Voorbeelden kunnen worden fading in, glijden, of andere visuele effecten. Bijna al deze functionaliteit is gebaseerd rond een enkele component: de overgang component.

Een eenvoudig voorbeeld is het met een v-als op basis van een Boolean-waarde zijn. Wanneer de Boolean true is, wordt het element wordt weergegeven. Wanneer de Boolean false is, het element verdwijnt. Normaal gesproken wordt dit element zou gewoon pop in en uit het bestaan, maar met de overgang van de component kunt u de controle van het visuele effect.

<transition>
<div v-als=”onzichtbaar”>is dit zichtbaar?</div>
</transition>

Verschillende artikelen geschreven die betrekking hebben op de overgang component heel goed, zoals de artikelen van Sarah Drasner, Nicolas Udy en Hassan Djirdeh. Elk artikel heeft betrekking op verschillende aspecten van de Vue de overgang van het onderdeel in detail. In dit artikel zal dieper op het onderwerp door zich te richten op één aspect van de overgang component; het feit dat ze kunnen worden “genoemd.”

<overgang name=”fade”>
<div v-als=”onzichtbaar”>is dit zichtbaar?</div>
</transition>

De initiële wijzigen van dit kenmerk is dat de CSS-klassen geïnjecteerd op het element tijdens de overgang volgorde zal worden voorafgegaan door de naam. Kortom, het zou fade-enter in plaats van v-voer in het voorbeeld hierboven. Dit enkel kenmerk kan gaan dan dit eenvoudige optie. Het kan worden gebruikt voor het benutten van bepaalde functies van de Vue en CSS die het mogelijk maakt voor een aantal interessante uitkomsten.

Een ander ding om te overwegen is dat het name-attribuut kan worden gebonden:

<overgang v-binding:naam=”currentTransition”>
<div v-als=”onzichtbaar”>is dit zichtbaar?</div>
</transition>

In dit voorbeeld, zal de overgang worden de naam van de waarde currentTransition opgelost. Deze eenvoudige verandering zorgt voor een ander niveau van opties en functies om een app animaties. Met statische en dynamische genoemd overgangen, een project kan een reeks vooraf gedefinieerde overgangen klaar voor toepassing in de gehele app, onderdelen die u kunt uitbreiden van bestaande transities op hen van toepassing is, schakelt een overgang wordt gebruikt voordat of nadat het is toegepast, zodat gebruikers om te kiezen overgangen, en te bepalen hoe de individuele elementen van een lijst overgang in plaats gebaseerd op de huidige staat van die lijst.

Dit artikel is bedoeld om te verkennen deze functies en leg uit hoe ze te gebruiken.

Wat gebeurt er als overgangen worden genoemd?

Standaard worden als een overgang component wordt gebruikt, geldt het bepaalde klassen in een bepaalde volgorde aan het element. Deze lessen kunnen worden gebruikt in CSS. Zonder CSS, deze klassen, in essentie, niets doen voor het element. Daarom is er een behoefte om de CSS van deze aard:

.v-enter,
.v-vertrekken-naar {
opacity: 0;
}

.v-enter-actief,
.v-leave-active {
overgang: 0,5 s;
}

Dit zorgt ervoor dat het element te laten in-en uitfaden met een duur van een halve seconde. Een kleine wijziging in de overgang zorgt voor een elegante visuele feedback aan de gebruiker. Toch is er een probleem te beschouwen. Maar eerst, wat is er anders met een naam overgang?

.fade-enter,
.fade-vertrekken-naar {
opacity: 0;
}

.fade-enter-actief,
.fade-laat-active {
overgang: 0,5 s;
}

In wezen dezelfde CSS maar met fade – prefix in plaats van v-. Deze naam-adressen het mogelijke probleem dat kan gebeuren wanneer u de standaard klasse namen van de overgang component. De v – voorvoegsel dat maakt de lessen een mondiaal effect, vooral als de CSS is geplaatst in de stijl blokkeren van de app root niveau. Dit zou in feite maken *alle* overgangen zonder een name-attribuut in het hele app-gebruik hetzelfde effect overgang. Voor kleine apps kan dit voldoende zijn, maar in grotere, meer complexe apps, kan dit leiden tot ongewenste visuele effecten, als niet alles moet laten in-en uitfaden meer dan een halve seconde.

De naamgeving van overgangen biedt een niveau van controle voor de ontwikkelaars in het project, hoe de verschillende elementen of onderdelen worden ingevoegd of verwijderd visueel. Er wordt gesuggereerd dat alle overgangen worden genoemd — zelfs als het er maar één — tot stand brengen van de gewoonte van dit te doen. Zelfs als u een app heeft alleen een transitie-effect, kan er een behoefte aan een nieuwe toe te voegen bij een bepaald punt in de toekomst. Na al de naam van de bestaande overgangen in het project vergemakkelijkt de moeite van het toevoegen van een nieuwe.

Het opbouwen van een verzameling van de transitie-effecten

De naamgeving van overgangen zorgt voor een eenvoudige, maar zeer nuttig proces. Een veel voorkomende praktijk zou kunnen worden om de overgang te maken van klassen als onderdeel van de component die ze gebruikt. Als een andere veel voorkomende praktijk van de scoping-stijlen voor een component wordt gedaan, deze klassen zal alleen beschikbaar zijn voor dat specifieke onderdeel. Als twee verschillende componenten soortgelijke overgangen in hun stijl blokken, dan zijn we gewoon het dupliceren van de code.

Dus, laten we het houden CSS transities in de stijl blok van de wortel van de app, meestal in de app.vue-bestand. Voor de meeste van mijn projecten, en ik plaats ze zoals u het laatste gedeelte van de stijl blok, waardoor ze gemakkelijk te vinden zijn om aanpassingen en toevoegingen. Het houden van de CSS in deze locatie maakt de overgang gevolgen van elk gebruik van de overgang component gedurende de gehele app. Hier zijn voorbeelden van een aantal van mijn projecten.

.fade-enter,
.fade-laat-{ opacity: 0; }
.fade-enter-actief,
.fade-laat-active { transition: 0,5 s; }

.dia-voer {
opacity: 0;
transformeren: scale3d(2, 0.5, 1) translate3d(400px, 0, 0);
}

.dia-enter-{ transform: scale3d(1, 1, 1); }
.dia-enter-actief,
.dia-laat-active { transition: 0,5 s kubieke bezier(0.68, -0.55, 0.265, 1.55); }
.dia-laat { transform: scale3d(1, 1, 1); }

.dia-vertrekken-naar {
opacity: 0;
transformeren: scale3d(2, 0.5, 1) translate3d(-400px, 0, 0);
}

.draai-voer { transform: perspectief(500 px) rotate3d(0, 1, 0, 90deg); }
.draai-enter-actief,
.draai-laat-active { transition: 0,5 s; }
.draai-laat-{ transform: perspectief(500 px) rotate3d(0, 1, 0, -90deg); }

Er zijn meerdere manieren om het opslaan van deze overgang klassen, afhankelijk van uw voorkeuren en de behoeften van het project. De eerste, zoals eerder vermeld, is om te houden het allemaal in de stijl blokkeren van de app.vue-bestand. U kunt ook houden van een Sass gedeeltelijk van alle overgangen in het project activa map en importeren in de app stijl blok.

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

Deze methode zorgt voor aanpassingen en aanvullingen op de collectie van overgangen buiten de Vue bestanden. Een ander voordeel van deze opzet is dat een dergelijk bestand kan gemakkelijk worden overgedragen tussen projecten als ze delen van de transitie-effecten. Als een project wordt een nieuwe overgang, dan is het makkelijk genoeg om te dragen aan een ander project, zonder contact met belangrijkste project bestanden.

Als u met behulp van CSS in plaats van Sass, dan kunt u het bestand als een eis van het project. U kunt dit bereiken door het houden van het bestand in de activa map van het project en het plaatsen van een eisen-en verliesrekening in de main.js -bestand.

require(“@/assets/overgangen.css”);

Een andere optie is het houden van de overgang stijlen in een statische CSS-bestand dat kan worden opgeslagen elders, hetzij in de openbare map van het project of gewoon op de server zelf. Aangezien dit is een gewoon CSS-bestand, geen gebouw of implementatie nodig zou zijn — alleen een link verwijzing in de index.html -bestand.

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

Dit bestand kan mogelijk ook worden opgeslagen in een CDN voor alle projecten te delen. Wanneer het bestand is bijgewerkt, worden de wijzigingen direct en overal beschikbaar is verwezen. Als een nieuwe overgang naam is gemaakt, en vervolgens de bestaande projecten van start kan gaan met de nieuwe naam als dat nodig is.

Nu, laten we vertragen minuten

Terwijl we het bouwen van een verzameling van overgangen te gebruiken in ons project, laten we er gebruikers zijn die niet willen abrupt animaties, of die willen geen animaties. Sommige mensen zou kunnen overwegen om onze animaties over-de-top en onnodig, maar voor sommige, ze kunnen de oorzaak van problemen. Enige tijd geleden, WebKit introduceerde de voorkeur-verlaagd-motion media query om te helpen met mogelijke Vestibulaire Spectrum Stoornis problemen. Eric Bailey ook geplaatst een mooie introductie tot de media query.

In de meeste gevallen, het toevoegen van de media query als een deel van onze collectie van de overgangen is vrij eenvoudig en moet worden beschouwd. We kunnen ofwel het verminderen van de hoeveelheid beweging die betrokken zijn bij de overgang naar het verminderen van de negatieve effecten of gewoon uitzetten.

Hier is een eenvoudig voorbeeld van een van mijn demo ‘ s hieronder:

.volgende-voer {
opacity: 0;
transformeren: scale3d(2, 0.5, 1) translate3d(400px, 0, 0);
}

.-volgende enter-{ transform: scale3d(1, 1, 1); }
.-volgende enter-actief,
.volgende-laat-active { transition: 0,5 s kubieke bezier(0.68, -0.55, 0.265, 1.55); }
.volgende-laat { transform: scale3d(1, 1, 1); }

.volgende-laat – {
opacity: 0;
transformeren: scale3d(2, 0.5, 1) translate3d(-400px, 0, 0);
}

/* Als de animaties zijn teruggebracht op het niveau van het BESTURINGSSYSTEEM, gebruik eenvoudiger overgangen */
@media screen and (graag met verminderde beweging: verminderen) {
.volgende-voer {
opacity: 0;
transformeren: translate3d(100px, 0, 0);
}

.-volgende enter-actief,
.volgende-laat-active { transition: 0,5 s; }

.volgende-laat – {
opacity: 0;
transformeren: translate3d(-100px, 0, 0);
}
}

In dat voorbeeld, ik nam wat was een nogal overdreven overgang en het eenvoudiger gemaakt. De animatie is een dia die beweegt naar links met een elastische gemak, dan schalen naar beneden en verdwijnt als het beweegt. Als iemand het verminderen beweging voorkeur is ingesteld, wordt de animatie wordt een veel eenvoudigere overgang met een kortere afstand (die zorgt voor een tragere snelheid) en houdt het vervagen. Als we wilden om ze uit te schakelen, dan zouden we alleen verwijzen naar de klassen met de overgang goederen en hun waarde voor niemand.

Om dit te testen vereist het vinden en selecteren van een vakje op uw respectieve OS. Op Windows kan je vinden in Configuratiescherm > toegankelijkheidscentrum > om de computer beter te zien; kijk voor “alle onnodige animaties uitschakelen (indien mogelijk).” Op een Mac, kijk onder systeemvoorkeuren > Toegankelijkheid > Scherm; zoek het “Verminderen van de beweging.” De nieuwste iOS-apparaten hebben een soortgelijke instelling onder Toegankelijkheid.

Laten we flexibel blijven met onze verzameling overgangen

Met deze collectie van overgangen, is er een potentieel probleem van een gebrek aan flexibiliteit met de effecten. Bijvoorbeeld, wat als een element moet een iets tragere fade-tijd? Laten we zeggen dat alles in het effect kan hetzelfde blijven, alleen de overgang-duur. Er zijn manieren aan te passen dat zonder een hele nieuwe overgang naam.

De eenvoudigste methode is het gebruik van een inline stijl, direct aan het element in de overgang component.

<overgang name=”fade”>
<div style=”transition-duur: 6s;” v-als=”onzichtbaar”>dit is een andere duur</div>
</transition>

Een dergelijke wijziging kan ook worden gedaan door de verschillende manieren Vue biedt behandeling stijlen en klassen.

Laten we zeggen dat je met behulp van de component-element met het attribuut voor dynamische onderdelen, zoals dit:

<overgang name=”fade” mode=” ” uit -“>
<component :is=”currentComponent”></component>
</transition>

Zelfs met deze dynamische component, hebben we de opties voor het aanpassen van de eigenschappen van het effect voor de overgang. Opnieuw kunnen we de toepassing van een inline stijl op de component-element, die zal worden geplaatst op het root element van het onderdeel. Het root-element ontvangt ook de overgang klassen, zodat we direct boven hun eigenschappen.

<overgang name=”fade” mode=” ” uit -“>
<component :is=”currentComponent” style=”transition-duur: 6s;”></component>
</transition>

Een andere optie is om in de rekwisieten van onze componenten. Op die manier, de gewenste wijzigingen kunnen aangebracht worden door de component code om het root element.

<overgang name=”fade” mode=” ” uit -“>
<component :is=”currentComponent” duration=”6″></component>
</transition>
<sjabloon>
<div style=”`transitie-duur: ${duur}`”>onderdeel</div>
</template>

<script>
export standaard {
naam: “component-een”,
rekwisieten: {
duur: String
}
};
</script>

We kunnen ook het overschrijven van de eigenschappen van de overgang van de klassen binnen de component stijl blok, vooral als het gaat om bereik.

<style bereik>
.fade-enter-actief,
.fade-laat-active { overgang-duur: 1s; }
</style>

In dit geval, het onderdeel zijn van een fade-duur van een seconde in plaats van de globale duur van een halve seconde. We kunnen zelfs een stap verder en hebben verschillende looptijden voor elke zijde van de reeks.

<style bereik>
.fade-enter-active { overgang-duur: 1s; }
.fade-laat-active { overgang-duur: 2; }
</style>

Een van de wereldwijde transitie klassen kunnen worden gewijzigd binnen het onderdeel indien nodig. Hoewel dit niet zo flexibel als het veranderen van de woning buiten van een klasse structuur, het kan nog steeds heel nuttig zijn in bepaalde omstandigheden.

Zoals u kunt zien, zelfs met onze collectie van vooraf gedefinieerde overgangen, we hebben nog steeds mogelijkheden voor flexibiliteit.

Dynamische overgangen

Zelfs na al die interessante dingen die we kunnen doen met Vue de overgang van het onderdeel, nog een andere interessante functie die wacht om ontdekt te worden. Het attribuut name op de overgang onderdeel kan zijn van nature dynamisch, wat betekent dat we kunnen veranderen aan de huidige overgang in gebruik.

Dit betekent dat de overgang kan worden veranderd met verschillende animatie-effecten met verschillende situaties, gebaseerd op de code. Bijvoorbeeld, kunnen wij een overgang verandering, omdat het antwoord op een vraag, overgangen besloten uit de interactie van de gebruiker, en een lijst maken gebruik van verschillende overgangen op basis van de huidige status van de lijst zelf.

Laten we kijken naar deze drie voorbeelden.

Voorbeeld 1: Wijziging overgang op basis van een antwoord

In dit voorbeeld hebben we een eenvoudige wiskundige vraag die beantwoord moet worden. Twee nummers zijn willekeurig gekozen en zijn we van u verwacht dat u de som. Klik dan op de knop wordt geklikt om te controleren het antwoord tegen de verwachte antwoord. Een klein bericht verschijnt boven de vergelijking geeft aan of het antwoord juist of onjuist is. Als het antwoord juist is, wordt de melding wordt gedaan van een overgang dat suggereert een hoofd knikt ja met een up-en down-animatie. Indien het antwoord onjuist is, wordt de melding gaat side-to-side suggereren een hoofd schudden nee.

Zie de Pen
VueJS Dynamische Overgangen: overgangen Wijzigen op Basis van een Antwoord van Travis Almand (@talmand)
op CodePen.

De logica hierachter is niet al te ingewikkeld, noch is de setup van de overgang. Hier is de HTML-code:

<overgang :naam=”currentTransition”>
<div id=”kennisgeving” :class=”reactie.toString()” v-als=”answerChecked”>{{ response }}</div>
</transition>

Vrij eenvoudig in de natuur. We hebben een gebonden, naam op de overgang en daarna een v-als op de kennisgeving div. We zijn ook van toepassing true of false klasse voor het versieren van de melding op basis van het antwoord.

Hier is de CSS voor de overgangen:

.positief-enter-active { animatie: positieve 1s; }
@keyframes positieve {
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); }
}

.negatief-enter-active { animatie: negatieve 1s; }
@keyframes negatieve {
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); }
}

U zult zien dat ik met behulp van CSS animaties tot het bereiken van de up-en down-en side-to-side-effecten.

Hier zijn een paar van de JavaScript:

methoden: {
randomProblem: function () {
deze.a = Wiskunde.verdieping(Math.random() * Wiskunde.verdieping(10));
deze.b = Wiskunde.verdieping(Math.random() * Wiskunde.verdieping(10));
},
check: function () {
deze.antwoord = dit.een +.b === parseInt(deze.antwoord);
deze.answerChecked = true;
deze.currentTransition = dit.reactie ? ‘positieve’ : ‘negatief’;
},
reset: function () {
deze.antwoord = null;
deze.answerChecked = false;
deze.randomProblem();
}
}

Er is de randomProblem methode die stelt onze vergelijking. De controle methode die besluit op die overgang-effect te gebruiken is gebaseerd op het vergelijken van de aangeboden antwoord met het juiste antwoord. Vervolgens de eenvoudige reset methode die ook stelt alles.

Dit is slechts een eenvoudig voorbeeld. Een ander mogelijk voorbeeld is het hebben van een melding dat heeft twee effecten gebaseerd op de vraag of de kennisgeving belangrijk is of niet. Als het bericht is niet al te belangrijk, dan kunnen we een subtiele animatie die niet rijden van de gebruiker ogen uit de buurt van de huidige taak. Als het belangrijk is, kunnen we gebruik maken van een animatie is meer direct in de natuur in een poging om de kracht van de ogen tot aan de kennisgeving.

Voorbeeld 2: overgangen Wijzigen op basis van de interactie van de gebruiker

Een ander ding dat we kunnen bouwen is een carrousel van een soort. Dit kan de presentatie dia ‘ s, een image gallery, of een reeks van instructies. Het idee is dat we nodig hebben om informatie te presenteren aan de gebruiker in een reeks. In deze presentatie krijgt de gebruiker om te beslissen waar te gaan en of om vooruit of achteruit gaan.

Zie de Pen
VueJS Dynamische Overgangen: overgangen Wijzigen op Basis van de Interactie van de Gebruiker door Travis Almand (@talmand)
op CodePen.

Ook dit is een vrij eenvoudige installatie. Het voorbeeld, meer of minder, is een dia presentatie van het type van de situatie. De twee knoppen aan de onderkant verschuiving tussen twee componenten met een glijdende overgang. Een echte project zou meer onderdelen, of misschien logica voor het wijzigen van de inhoud van de onderdelen is gebaseerd op de huidige dia. Dit voorbeeld zal blijven eenvoudig aan te tonen van het idee.

Hier is de HTML-code:

<overgang :naam=”currentTransition” mode=” ” uit -“>
<component :is=”slides[currentSlide]”></component>
</transition>

U zult zien dat we alleen overstappen als de component is uitgeschakeld met een gebonden is kenmerk van de component-element.

Hier is de CSS:

.volgende-voer {
opacity: 0;
transformeren: scale3d(2, 0.5, 1) translate3d(400px, 0, 0);
}

.-volgende enter-{ transform: scale3d(1, 1, 1); }
.-volgende enter-actief,
.volgende-laat-active { transition: 0,5 s kubieke bezier(0.68, -0.55, 0.265, 1.55); }
.volgende-laat { transform: scale3d(1, 1, 1); }

.volgende-laat – {
opacity: 0;
transformeren: scale3d(2, 0.5, 1) translate3d(-400px, 0, 0);
}

.prev-voer {
opacity: 0;
transformeren: scale3d(2, 0.5, 1) translate3d(-400px, 0, 0);
}

.prev-enter-{ transform: scale3d(1, 1, 1); }
.prev-enter-actief,
.prev-laat-active { transition: 0,5 s kubieke bezier(0.68, -0.55, 0.265, 1.55); }
.prev-laat { transform: scale3d(1, 1, 1); }

.prev-vertrekken-naar {
opacity: 0;
transformeren: scale3d(2, 0.5, 1) translate3d(400px, 0, 0);
}

/* Als de animaties zijn teruggebracht op het niveau van het BESTURINGSSYSTEEM, gebruik eenvoudiger overgangen */
@media screen and (graag met verminderde beweging: verminderen) {
.volgende-voer { opacity: 0; transformatie: translate3d(100px, 0, 0); }
.-volgende enter-actief,
.volgende-laat-active { transition: 0,5 s; }
.volgende-laat-{ opacity: 0; transformatie: translate3d(-100px, 0, 0); }

.prev-voer { opacity: 0; transformatie: translate3d(-100px, 0, 0); }
.prev-enter-actief,
.prev-laat-active { transition: 0,5 s; }
.prev-laat-{ opacity: 0; transformatie: translate3d(100px, 0, 0); }
}

Hier hebben we twee overgangen, een voor wanneer de gebruiker klikt op de knop “volgende” en de andere is voor de “vorige” – knop. Elk wezen dia ‘s van de component in de juiste richting met de transformatie goederen, maar met een paar extra’ s maken een soort knijpen effect voor een cartooneske uitstraling. Wij maken ook gebruik van een voorkeur-verlaagd-de motie te wijzigen van de animatie aan een eenvoudigere vervagen met een kleine glijbaan aan de zijkant in de juiste richting.

Nu, voor het JavaScript:

methoden: {
changeSlide: functie (dir) {
deze.currentSlide = dir === ‘volgende’ ? deze.currentSlide + 1 : dit.currentSlide – 1;
deze.currentTransition = dir;
}
}

Elke knop roept de changeSlide methode op de klik op de gebeurtenis en gaat in de richting die het vertegenwoordigt. Dan hebben wij de logica om bij te houden wat de huidige dia gebeurt te zijn. Een enkele lijn controles die de overgang te gebruiken. Sinds de knop “volgende” pasjes “next” zoals de richting en komt overeen met de “volgende” de overgang in de CSS. Hetzelfde voor de “vorige” – knop. Elke keer dat de gebruiker op een knop klikt, zal de app automatisch weet wat voor een overgang te gebruiken. Dus, we hebben mooie overgangseffecten die context welke richting de gebruiker is verlopen via de reeks.

Voorbeeld 3: Wijzig de overgang gebaseerd op de lijst staat

Voor onze laatste voorbeeld, we zullen zien hoe het wijzigen van transities op basis van de huidige toestand van een lijst in een transitie-groep component. Het idee hier is een lijst worden bijgewerkt van een item in een tijd met een andere overgang.

Zie de Pen
VueJS Dynamische Overgangen: overgangen Wijzigen op Basis van de Lijst Staat van Travis Almand (@talmand)
op CodePen.

In dit voorbeeld worden gepresenteerd met een lijst van steden aan de rechterkant en met een lege lijst aan de linkerkant. Als steden zijn gekozen aan de rechterkant, ze vullen de lege plekken op de links. De eerste stad dia ‘ s van bovenaf, terwijl fading in beeld. De volgende steden voor de laatste schuift in, hetzij van rechts of links, afhankelijk van de vorige overgang, en de laatste stad dia ‘ s in uit de onderstaande lijst.

Hier is de HTML-code:

<transitie-groep :naam=”currentListTransition” tag=”ul” class=”list”>
<li v-for=”(item index) in selectedItems” :key=”item”>{{ item }}</li>
</transitie-groep>

Zoals gewoonlijk, een zeer eenvoudige installatie. Hier zijn de overgangen in CSS:

.top-enter-actief,
.top-laat-active { transition: 0,5 s; }
.top-enter,
.top-vertrekken-naar {
opacity: 0;
transformeren: translate3d(0, -40px, 0);
}

.top-move {
opacity: 0.5;
overgang: 0,5 s;
}

.links-enter-actief,
.links-laat-active { transition: 0,5 s; }
.links-enter,
.links-vertrekken-naar {
opacity: 0;
transformeren: translate3d(-40px, 0, 0);
}

.links-beweeg {
opacity: 0.5;
overgang: 0,5 s;
}

.rechts-enter-actief,
.rechts-laat-active { transition: 0,5 s; }
.rechts-enter,
.rechts-vertrekken-naar {
opacity: 0;
transformeren: translate3d(40px, 0, 0);
}

.rechts-beweeg {
opacity: 0.5;
overgang: 0,5 s;
}

.bottom-enter-actief,
.bottom-laat-active { transition: 0,5 s; }
.bottom-enter,
.bottom-vertrekken-naar {
opacity: 0;
transformeren: translate3d(0, 30 met een afwijkende, 0);
}

.beneden-beweeg {
opacity: 0.5;
overgang: 0,5 s;
}

/* Als de animaties zijn teruggebracht op het niveau van het BESTURINGSSYSTEEM, zet overgangen */
@media screen and (graag met verminderde beweging: verminderen) {
.top-enter-actief,
.top-laat-active { transition: none; }
.top-move { transition: none; }
.links-enter-actief,
.links-laat-active { transition: none; }
.links-beweeg { transition: none; }
.rechts-enter-actief,
.rechts-laat-active { transition: none; }
.rechts-beweeg { transition: none; }
.bottom-enter-actief,
.bottom-laat-active { transition: none; }
.beneden-beweeg { transition: none; }
}

Zoals u kunt zien, een overgang voor elke mogelijke richting van de steden verschijnen de lege lijst.

Nu, voor onze JavaScript:

methoden: {
chooseCity: function (index) {
laat selectedLength = dit.selectedItems.lengte;
laat citiesLength = dit.steden.lengte;
laat clt = dit.currentListTransition;

als (selectedLength === 0) {
clt = ‘top’;
} else if (selectedLength > 0 && selectedLength < citiesLength – 1) {
clt = clt === ‘top’ || clt === ‘links’ ? ‘recht’ : ‘links’;
} else if (selectedLength === citiesLength – 1) {
clt = ‘bottom’;
}

deze.currentListTransition = clt;
deze.selectedItems.push(deze.steden[index]);
document.querySelector(`.stad:nth-child(${index + 1})`).classList.add(‘geselecteerd’);
},

clearSelection: function () {
deze.currentListTransition = ‘right’;
deze.selectedItems = [];
document.querySelectorAll(‘.city.gekozen is voor’).forEach(element => {
element.classList.verwijderen(‘geselecteerd’);
});
}
}

De chooseCity methode behandelt wat er gebeurt als u kiest voor elke stad. Wat we meestal doen is, is de serie if en if/else statements in het midden van de methode. Als steden zijn geselecteerd, de logica lijkt op de huidige lengte van de selectedItems array dat de geselecteerde steden uiteindelijk krijgen geduwd. Als de lengte nul is, dan is dat de eerste stad, zodat de overgang moet komen in de top. Als de lengte is tussen de nul en het totale aantal van onze steden-lijst, dan is de overgang moet rechts of links. De nieuwe richting die gebruikt wordt is gebaseerd op de richting van de vorige transitie richting. En dan, eindelijk, als we op de laatste stad om gekozen te worden, het zal veranderen aan de onderkant overgang. Opnieuw gebruiken we graag met verminderde beweging, in dit geval het uitschakelen van de overgangen helemaal.

Een andere optie voor het wijzigen van overgangen voor een lijst verandert afhankelijk van het type items gekozen; zoals oostkust versus west coast steden, elk met verschillende overgangen. Te overwegen het veranderen van de overgang op basis van het huidige aantal items aan de lijst toegevoegd; bijvoorbeeld, een andere overgang voor elke vijf items.

Zo lang, en bedankt voor alle overgangen

Na al deze voorbeelden en ideeën, ik hoop dat u zult overwegen benutten Vue de overgang van de component in uw eigen projecten. Het verkennen van de mogelijkheden van het toevoegen van overgangen en animaties aan uw applicaties te bieden context en belang voor uw gebruikers. In veel gevallen toevoegingen zoals deze zijn vrij eenvoudig te implementeren, bijna tot het punt dat het een schande, niet om ze toe te voegen. Vue biedt een spannende en zeer handige functie, de overgang component van het vak en kan ik alleen maar aanmoedigen van het gebruik.

Gejuich.