Animație CSS componabilă în Vue cu AnimXYZ

În acest articol, veți învăța cum să utilizați setul de instrumente AnimXYZ pentru a crea animații unice, interactive și captivante vizual în Vue.js și HTML simplu. Până la sfârșitul acestui articol, veți învăța cum adăugarea câtorva clase CSS la elementele din componentele Vue.js vă poate oferi mult control asupra modului în care aceste elemente se mișcă în DOM.

Acest tutorial va fi benefic pentru cititorii care sunt interesați să creeze animații interactive cu câteva linii de cod.

Notă : Acest articol necesită o înțelegere de bază a Vue.js și CSS.

Ce este AnimXYZ?

AnimXYZ este un set de instrumente de animație CSS compus, performant și personalizabil, alimentat de variabile CSS. Este conceput pentru a vă permite să creați animații extraordinare și unice fără a scrie o linie de cadre cheie CSS. Sub capotă, folosește variabile CSS pentru a crea proprietăți CSS personalizate. Lucrul frumos despre AnymXYZ este abordarea sa declarativă. Un element poate fi animat în unul din două moduri: la intrarea sau la ieșirea din pagină. Dacă doriți să animați un element HTML cu acest set de instrumente, adăugarea unei clase de xyz-out va anima elementul în afara paginii, în timp ce xyz-in va anima componenta în pagină.

Acest set de instrumente minunat poate fi folosit într-un proiect HTML obișnuit, precum și într-o aplicație Vue.js sau React. Cu toate acestea, la momentul redactării acestui articol, suportul pentru React este încă în curs de dezvoltare .

De ce să folosiți AnimXYZ?

Composabil

Animația cu AnimXYZ este posibilă prin adăugarea numelor descriptive ale clasei la marcaj. Acest lucru facilitează scrierea de animații CSS complexe fără a scrie cadre cheie CSS complexe . Animarea unui element în pagină este la fel de ușoară ca și adăugarea unei clase de xyz-in în componentă și declararea unui atribut descriptiv.

 <p class="xyz-in" xyz="fade">Composable CSS animation with AnimXYZ</p>

Codul de mai sus va face ca elementul paragraf să dispară în pagină, în timp ce codul de mai jos va face ca elementul să dispară din pagină. Doar o singură clasă cu multă putere.

 <p class="intro xyz-out" xyz="fade">Composable CSS animation with AnimXYZ</p>

Personalizat

Pentru animații simple, puteți folosi utilitarele din nou, dar AnimXYZ poate face mult mai mult. Puteți personaliza și controla AnimXYZ pentru a crea exact animațiile dorite, setând variabilele CSS care conduc toate animațiile AnimXYZ. Vom crea câteva animații personalizate mai târziu în acest tutorial.

Performant

Cu AnimXYZ, puteți crea animații puternice și fluide din cutie, iar dimensiunea sa este de numai 2,68 KB pentru funcționalitatea de bază și 11,4 KB dacă includeți utilitățile convenabile.

Ușor de învățat și utilizat

AnimXYZ funcționează perfect cu HTML și CSS obișnuiți și poate fi integrat într-un proiect folosind link-ul rețelei de livrare a conținutului (CDN). Poate fi folosit și în Vue.js și React, deși suportul pentru React este încă în curs de dezvoltare. De asemenea, curba de învățare cu acest set de instrumente nu este abruptă în comparație cu bibliotecile de animație precum GSAP și Framer Motion, iar documentația oficială facilitează începerea, deoarece explică cum funcționează pachetul în termeni simpli.

Concepte cheie în AnimXYZ

Contexte

Când doriți ca un anumit flux de animație să fie aplicat unor grupuri de elemente înrudite, atributul xyz oferă contextul. Să presupunem că doriți ca trei div -uri să fie animate în același mod atunci când intră în pagină. Tot ce trebuie să faceți este să adăugați atributul xyz la elementul părinte, cu utilitățile componabile și variabila pe care doriți să le aplicați.

 <div class="shape-wrapper xyz-in" xyz="fade flip-up flip-left"> <div class="shape"></div> <div class="shape"></div> <div class="shape"></div> </div>

Codul de mai sus va aplica aceeași animație tuturor div -urilor cu o clasă de shape . Toate elementele secundare se vor estompa în pagină și se vor întoarce în stânga sus, deoarece atributul xyz="fade flip-up flip-left" a fost aplicat elementului părinte.

AnimXYZ facilitează animarea unui element copil diferit de cel părinte. Pentru a realiza acest lucru, adăugați atributul xyz cu o variabilă de animație diferită și utilități diferite la elementul copil, care va reseta toate proprietățile de animație pe care le-a moștenit de la părintele său.

Utilități

AnimXYZ vine cu o mulțime de utilități care vă vor permite să creați animații CSS captivante și puternice fără a scrie niciun CSS personalizat.

 xyz="fade up in-left in-rotate-left out-right out-rotate-right"

De exemplu, codul de mai sus are un utilitar fade up , care va face ca elementul să se estompeze de sus în jos atunci când intră în pagină. Acesta va intra și se va roti din stânga. Când elementul părăsește pagina, acesta va merge la dreapta și se va roti în afara paginii.

Cu utilitarele din nou din cutie, puteți, să zicem, să întoarceți un grup de elemente la dreapta și să le faceți să se estompeze în timp ce părăsiți pagina. Posibilitățile a ceea ce se poate realiza cu utilitățile sunt nesfârșite.

uluitoare

Utilitarul stagger controlează proprietatea animation-delay CSS pentru fiecare dintre elementele dintr-o listă, astfel încât animațiile acestora să fie declanșate una după alta. Specifică timpul de așteptat între aplicarea animației unui element și începerea efectuării animației. În esență, este folosit pentru a pune în coadă animația, astfel încât elementele să poată fi animate în secvență.

 <div class="shape-wrapper" xyz="fade up-100% origin-top flip-down flip-right-50% rotate-left-100% stagger"> <div class="shape xyz-in"></div> <div class="shape xyz-in"></div> <div class="shape xyz-in"></div> <div class="shape xyz-in"></div> </div>

Adăugând utilitarul stagger , fiecare element dintr-un div părinte se va anima unul după altul de la stânga la dreapta. Ordinea poate fi respectată folosind stagger-rev .

Cu stagger :

Fără stagger :

Utilizarea AnimXYZ cu HTML și CSS

Să construim un card și să adăugăm niște animații cool cu ​​AnimeXYZ.

În primul rând, trebuie să adăugăm setul de instrumente AnimXYZ la proiectul nostru. Cea mai ușoară cale este prin intermediul unui CDN. Luați CDN-ul și adăugați-l la head documentului HTML.

Adăugați următoarele linii de cod în HTML.

 <p class="intro xyz-in" xyz="fade">Composable CSS Animation with Animxyz</p> <div class="glass xyz-in" xyz="fade flip-down flip-right-50% duration-10"> <img src="https://cdn.dribbble.com/users/238864/screenshots/15043450/media/7160a9f4acc18f4ec2cbe38eb167de62.jpg" alt="" class="avatar xyz-in"> <p class="des xyz-in">Image by Jordon Cheung</p> </div>

Aici se întâmplă magia. În partea de sus a paginii, avem o etichetă de paragraf cu o clasă de xyz-in și un atribut xyz cu valoarea fade . Aceasta înseamnă că elementul p se va estompa în pagină.

În continuare, avem un card cu un id de glass , cu următorul atribut xyz :

 xyz="fade flip-down flip-right-50% duration-10"

Utilitățile composabile de mai sus vor face ca cardul să dispară în pagină. Valoarea flip-down va seta cardul să răstoarne în pagină de jos, iar valoarea flip-right va răsturna cardul cu 50% la părăsirea paginii. O durată de animație de 10 (adică 1 secundă) stabilește durata de timp pe care o va dura animația pentru a finaliza un ciclu.

Integrarea AnimXYZ în Vue.js

Scala un proiect Vue.js

Folosind interfața de linie de comandă (CLI) Vue.js, rulați comanda de mai jos pentru a genera aplicația:

 vue create animxyz-vue

Instalați VueAnimXYZ

 npm install @animxyz/vue

Aceasta va instala atât pachetul de bază, cât și pachetul Vue.js. După instalare, va trebui să importăm pachetul VueAnimXYZ în proiectul nostru și să adăugăm pluginul la nivel global în aplicația noastră Vue.js. Pentru a face acest lucru, deschideți fișierul main.js și adăugați următorul bloc de cod corespunzător:

 import VueAnimXYZ from '@animxyz/vue' // import AnimXZY vue package import '@animxyz/core' // import AnimXZY core package Vue.use(VueAnimXYZ)

Componenta XyzTransition

Componenta XyzTransition este construită pe deasupra componentei de transition a lui Vue.js. Este folosit pentru a anima elemente individuale în și în afara paginii.

Iată o demonstrație despre cum să utilizați componenta XyzTransition în Vue.js.

Observați că o mare parte din complexitatea care vine cu componenta de transition a Vue.js a fost eliminată pentru a reduce complexitatea și a crește eficiența. Tot ce trebuie să ne pasă atunci când folosim componenta XyzTransition sunt elementele de arătare, appear appear-visible , duration și mode .

Pentru un ghid mai detaliat, consultați documentația oficială.

Să folosim componenta XYZTransition pentru a anima un element atunci când se face clic pe un buton.

 <div> <button @click="isAnimate = !isAnimate">Animate</button> <XyzTransition appear xyz="fade up in-left in-rotate-left out-right out-rotate-right" > <div class="square" v-if="isAnimate"></div> </XyzTransition> </div>

Observați cum elementul pe care intenționăm să-l tranziți este înfășurat în componenta XYZTransition . Acest lucru este important deoarece elementul copil <div class="square" v-if="isAnimate"></div> va moșteni utilitățile care sunt aplicate componentei XYZTransition . Elementul copil este, de asemenea, redat condiționat când isAnimate este setat la true . Când se face clic pe butonul, elementul copil cu o clasă de square este comutat în și în afara DOM.

XyzTransitionGroup

Componenta XyzTransitionGroup este construită pe deasupra componentei transition-group a Vue.js. Este folosit pentru a anima grupuri de elemente în și în afara paginii.

Mai jos este o ilustrare a modului de utilizare a componentei XyzTransitionGroup în Vue.js. Observați aici din nou că o mare parte din complexitatea care vine cu componenta transition-group a Vue.js a fost eliminată pentru a reduce complexitatea și a crește eficiența. Tot ce trebuie să ne pasă atunci când folosim componenta XyzTransitionGroup sunt appear , appear-visible , duration și tag . Următoarele sunt preluate din documentație:

 <XyzTransitionGroup appear={ boolean } appear-visible={ boolean | IntersectionObserverOptions } duration={ number | 'auto' | { appear: number | 'auto', in: number | 'auto', out: number | 'auto' } } tag={ string } > <child-component /> <child-component /> <child-component /> </XyzTransitionGroup>

Creați un mod animat cu AnimXYZ și Vue.js

Să construim componente modale care se vor anima pe măsură ce intră și ies din DOM.

Iată o demonstrație a ceea ce vom construi:

Adăugând proprietatea xyz="fade out-delay-5" la componenta XyzTransition , modalul se va estompa.

Observați că adăugăm .xyz-nested la aproape toate elementele copil ale componentei modale. Acest lucru se datorează faptului că dorim să declanșăm animațiile lor atunci când elementul unei componente modale este deschis.

Proprietatea ease-out-back pe care am adăugat-o la containerul de dialog va adăuga o ușoară depășire atunci când dialogul este deschis și când a fost închis.

Adăugarea in-delay la elementele secundare ale componentei modale va face ca animația să se simtă mai naturală, deoarece elementul va fi amânat până când celelalte conținuturi ale modalului vor fi animate în:

 <section class="xyz-animate"> <div class="alerts__wrap copy-content"> <div class="alert reduced-motion-alert"> <p> AnimXYZ animations are disabled if your browser or OS has reduced-motion setting turned on. <a href="https://web.dev/prefers-reduced-motion/" target="_blank"> Learn more here. </a> </p> </div> </div> <h1>Modal Animation With AnimXYZ and Vue.js</h1> <button class="modal-toggle modal-btn-main" data-modal-text="Open Modal" data-modal-title="Title" data-modal-close-text="Close" aria-haspopup="dialog" ref="openButton" @click="open" autofocus > Open Modal </button> <span class="simple-modal-overlay" data-background-click="enabled" title="Close this window" v-if="isModal" @click="close" > <span class="invisible">Close this window</span> </span> <div role="dialog" class="simple-modal__wrapper" aria-labelledby="modal-title" > <XyzTransition duration="auto" xyz="fade out-delay-5"> <section aria-labelledby="modal1_label" aria-modal="true" class="modal xyz-nested" xyz="fade small stagger ease-out-back" v-if="isModal" tabindex="-1" ref="modal" @keydown.esc="close" > <div class="modal_top flex xyz-nested" xyz="up-100% in-delay-3"> <header class="modal_label xyz-nested" xyz="fade right in-delay-7" > Join our community on Slack </header> <button type="button" aria-label="Close" xyz="fade small in-delay-7" class="xyz-nested" @click="close" title="Close" > <svg viewBox="0 0 24 24" focusable="false" aria-hidden="true"> <path fill="currentColor" d="M.439,21.44a1.5,1.5,0,0,0,2.122,2.121L11.823,14.3a.25.25,0,0,1,.354,0l9.262,9.263a1.5,1.5,0,1,0,2.122-2.121L14.3,12.177a.25.25,0,0,1,0-.354l9.263-9.262A1.5,1.5,0,0,0,21.439.44L12.177,9.7a.25.25,0,0,1-.354,0L2.561.44A1.5,1.5,0,0,0,.439,2.561L9.7,11.823a.25.25,0,0,1,0,.354Z" ></path> </svg> </button> </div> <div class="modal_body xyz-nested" xyz="up-100% in-delay-3"> <div class="modal_body--top flex justify_center align_center"> <img src="../assets/slack.png" alt="slack logo" class="slack_logo" /> <img src="../assets/plus.png" alt="plus" class="plus" /> <img src="../assets/discord.png" alt="discord logo" class="discord_logo" /> </div> <p><span class="bold">929</span> users are registered so far.</p> </div> <form class="modal_form" autocomplete> <label for="email" ><span class="sr-only">Enter your email</span></label > <input type="email" placeholder="[email protected]" autocomplete="email" class="modal_input" required /> <button type="submit" class="modal_invite_btn"> Get my invite </button> <p>Already joined?</p> <button type="button" class=" modal_slack_btn flex align_center justify_center xyz-nested " xyz="fade in-right in-delay-7" > <span ><img src="../assets/slack.png" alt="slack logo" role="icon" /></span> Open Slack </button> </form> </section> </XyzTransition> </div> </section>

Apoi, în modalul nostru, am folosi directiva v-if="isModal" pentru a specifica că dorim ca modalul să fie ascuns de pagină în mod implicit. Apoi, când se face clic pe butonul, deschidem modulul apelând metoda open() , care setează proprietatea isModal la true . Acest lucru va dezvălui modalul de pe pagină și va aplica, de asemenea, proprietățile de animație pe care le-am specificat utilizând utilitățile încorporate ale AnimXYZ.

 <script> export default { data() { return { isModal: false, }; }, methods: { open() { if (!this.isModal) { this.isModal = true; this.$nextTick(() => { const modalRef = this.$refs.modal; console.log(modalRef); modalRef.focus(); }); } }, close() { if (this.isModal) { this.isModal = false; this.$nextTick(() => { const openButtonRef = this.$refs.openButton; openButtonRef.focus(); }); } }, }, }; </script>

Animațiile lui AnimXYZ sunt dezactivate atunci când setarea de mișcare redusă din browser sau sistemul de operare este activată. Să afișăm un mesaj de ajutor pentru utilizatorii care au optat pentru mișcare redusă.

Folosind @media screen and (prefers-reduced-motion) , vom afișa un mesaj care anunță acești utilizatori că au dezactivat caracteristica de animație din componenta noastră modală. Pentru a face acest lucru, adăugați următorul bloc de cod la stilurile dvs.:

 <style> @media (prefers-reduced-motion: reduce) { .alerts__wrap { display: block; } } </style> 

Concluzie

Am trecut prin elementele de bază ale AnimXYZ și cum să-l folosim cu HTML simplu și Vue.js. De asemenea, am implementat câteva proiecte demonstrative care ne oferă o privire asupra gamei de animații CSS pe care le putem crea prin simpla adăugare a claselor de utilitate componabile furnizate de acest set de instrumente și toate fără a scrie o singură linie a unui cadru cheie CSS. Sperăm că acest tutorial v-a oferit o bază solidă pentru a adăuga câteva animații CSS elegante la propriile proiecte și pentru a construi pe ele în timp pentru oricare dintre nevoile dvs.

Demo-ul final este pe GitHub. Simțiți-vă liber să-l clonați și să încercați singur setul de instrumente.

Asta este tot pentru acum! Spune-mi în secțiunea de comentarii de mai jos ce părere ai despre acest articol. Sunt activ pe Twitter și GitHub. Vă mulțumim pentru citit și rămâneți pe fază.

Resurse

• Documentație, AnimXYZ
• AnimXYZ, Chris Coyier, trucuri CSS