Izrada glatkih CSS animacija - čak i s velikim DOM-om

Ovo je nastavak „Velikog životnog ciklusa male promjene proizvoda“ koji pokriva naš proces dizajniranja ove značajke.

Ljubičaste ploče mogu biti prilično teške u DOM-u - na jednu ploču projekta učitavamo sve vaše dokumente, nacrte, prototipe i zadatke. Ali to također znači da moramo biti vrlo oprezni u načinu na koji provodimo bilo kakve animacije. Kada smo implementirali redizajnirani tok za umetanje kartice u svoj projekt, upotrijebili smo sjajnu tehniku ​​o kojoj još nigdje nismo pisali. Pa smo mislili da ćemo dijeliti!

Evo što smo pokušali izgraditi s ovim projektom - mogućnost umetanja kartice između dvije postojeće kartice, a ne samo na kraju.

Izrada kartice usred vašeg projekta

Naša prva iteracija implementacije ove interakcije totalno je uspjela. Izazov je bio animirati širenje izbornika Nove kartice.

Izazov: Povećajte širinu izbornika Nova kartica i gurnite sljedeće kartice udesno

Između svake kartice stavili smo spremnik širok 0 px za izbornik Nove kartice. Klikom na gumb + premjestili smo svojstvo širine tog spremnika s 0 na 400 px.

Širina spremnika prešla je iz 0px u 400px, što otkriva izbornik New Card.

To je rezultiralo okvirom od 2 do 10 kadrova u sekundi tijekom animacije. Zašto? Kad promijenite CSS svojstva poput širine, visine, margine, podmetanja itd., Preglednik mora pokrenuti ono što se naziva "izgled". Kako širina jednog elementa može promijeniti širinu ili položaj drugog elementa, što će utjecati na ostale elemente, preglednik mora ponovno izračunati dimenzije i položaj svakog DOM elementa na zaslonu. Dakle, rade sve vrste izračuna. Svaki. Singl. Frame.

The Better Way®

Ono što smo umjesto toga uključili u CSS trik, pa neka bude korak po korak.

  1. Kliknite gumb +
  2. Umetnite novi izbornik nove kartice u DOM
  3. Primijenite transformiranje: translateX (-400px) na svaku sljedeću karticu
  4. Počnite animirati svojstvo translateX od -400px do 0px na svakoj od sljedećih kartica

U redu, pogledajmo svaki od tih koraka vizualno.

  1. Korisnik klikne gumb +

Sjajno!

2. Dodajte novu karticu u DOM.

Dodavanje izbornika u DOM pokrenut će izgled, ali samo jednom - i to prije nego što animacija započne. Ali kada dodamo izbornik u DOM, sljedeće kartice preskočit će desno.

Očito, ne želimo to. Pa što dalje?

3. Primjena transformacije: translateX (-400px)
Zajedno s korakom 2, na svaku sljedeću karticu odmah primjenjujemo transform: translateX (-400px). Zbog toga naredne kartice izgledaju kao da su na istom mjestu kao i kad su započele. Pogledaj ispod.

Ako biste nakon primjene translateX, pitali DOM za položaj druge kartice, on bi vam dao koordinate kao da je još uvijek u ružičastom okviru. Ali vizualno je prikazan lijevo. Zbog toga je transformacija: prijevod je tako velika - ne pokreće velike promjene u DOM-u, pa se izgled ne pokreće.

Dobro! Sada možemo animirati tu karticu s desne strane.

4. Počnite animirati svojstvo translateX
Vrijeme je za pokretanje stvarne animacije. Jednostavno prelazimo s translateX (-400px) na translateX (0px) na sljedećim karticama. Izgled ne pokreće svaki kadar, tako da glatko animiraju.

Tvrtka našeg rješenja

Ukratko, mi dodajemo izbornik u DOM i istodobno sljedećim karticama dajemo negativan prijevodX tako da izgledaju kao da su na istom mjestu. Zatim animirajte translateX za lijepu glatku animaciju.

Zatvaranje misli

Ova je tehnika ozbiljna optimizacija za jednu animaciju. Ali kad imate odličan tim, imate taj luksuz da pokušate pritisnuti preglednik na nove načine. Završna animacija točno se podudara s našim izvornim prototipom Principle. Možete ga vidjeti na Purple.pm - jednostavno stvorite besplatni račun i skočite u jedan od primjera projekata s kojima se možete igrati.

Pratite nas na Twitteru na @purpleapp da biste čuli više o radu sa značajkama koje radimo!