Luo sujuvia CSS-animaatioita - jopa raskaalla DOM: lla

Tämä on jatkoa ”Pienen tuotteen muutoksen iso elinkaari”, joka kattaa tämän ominaisuuden suunnitteluprosessimme.

Violetit levyt voivat olla melko raskaita DOM: ssa - lataamme kaikki asiakirjat, mallit, prototyypit ja tehtävät yhdelle projektilevylle. Mutta tämä tarkoittaa myös, että meidän on oltava erityisen varovaisia ​​animaatioiden toteuttamisessa. Kun toteutimme uudistetun prosessin kortin lisäämiseksi projektiisi, käytimme hienoa tekniikkaa, josta emme ole nähneet muualla kirjoitettuna. Joten ajattelimme, että jaamme!

Tätä yritimme rakentaa tämän projektin avulla - kyky lisätä kortti kahden olemassa olevan kortin väliin, eikä vain sen loppuun.

Kortin luominen projektin keskelle

Ensimmäinen toistomme tämän vuorovaikutuksen toteuttamisesta epäonnistui. Haasteena oli animoida uuden korttivalikon laajennus.

Haaste: Kasvata uuden korttivalikon leveyttä ja työnnä seuraavat kortit oikealle

Laitamme jokaisen kortin väliin 0 pikselin leveän säilön New Card -valikkoa varten. Kun napsautat + -painiketta, siirrimme säiliön leveysominaisuuden 0: sta 400 pikseliin.

Säiliön leveys nousi 0–400 kuvapistettä, mikä paljastaa uuden kortin valikon.

Tuloksena oli 2–10 kuvaa sekunnin kuvanopeus animaation aikana. Miksi? Kun muutat CSS-ominaisuuksia, kuten leveyttä, korkeutta, marginaalia, pehmusteita jne., Selaimen on suoritettava ns. Asettelu. Koska yhden elementin leveys voi muuttaa toisen elementin leveyttä tai sijaintia, mikä vaikuttaa muihin elementteihin, selaimen on laskettava uudelleen jokaisen näytön DOM-elementin mitat ja sijainti. Joten se tekee kaikenlaisia ​​laskelmia. Joka. Yksittäinen. Kehys.

Parempi tapa®

Sen sijaan, mitä teimme, liittyy CSS-huijausta, joten otamme se askel askeleelta.

  1. Napsauta + -painiketta
  2. Aseta Uusi kortti -valikko DOM: iin
  3. Käytä muunnosta: translateX (-400px) jokaiselle seuraavalle kortille
  4. Aloita translateX-ominaisuuden animointi -400px - 0px jokaisessa seuraavassa kortissa

Okei, katsotaan kaikki nämä vaiheet visuaalisesti.

  1. Käyttäjä napsauttaa + -painiketta

Loistava!

2. Lisää uusi kortti -valikko DOM: iin.

Valikon lisääminen DOMiin laukaisee asettelun, mutta vain kerran - ja se tapahtuu ennen animaation alkamista. Mutta kun lisäämme valikon DOM: iin, seuraavat kortit siirtyvät oikealle.

Emme selvästikään halua sitä. Joten mitä seuraavaksi?

3. Käytä muunnosta: translateX (-400px)
Vaiheen 2 yhteydessä käytämme välittömästi muuntoa: translateX (-400px) jokaisessa seuraavassa kortissa. Tämä tekee siitä, että seuraavat kortit näyttävät siltä, ​​että ne ovat samassa paikassa kuin aloittaessaan. Katso alempaa.

Jos kysyit DOM: lta toisen kortin sijaintia translateX: n asettamisen jälkeen, se antaa silti koordinaatit ikään kuin se olisi vielä vaaleanpunaisessa ruudussa. Mutta visuaalisesti se on siirretty vasemmalle. Siksi muuntaminen: kääntäminen on niin suurta - se ei aiheuta suuria muutoksia DOM: iin, joten asettelua ei käytetä.

Hyvä on! Nyt voimme animoida kortin oikealle.

4. Aloita translateX-ominaisuuden animointi
Aika suorittaa todellinen animaatio. Siirtymämme yksinkertaisesti translateX: sta (-400px) seuraaviin kortteihin translateX (0px). Asettelu ei suorita jokaista kehystä, joten ne animoivat sujuvasti.

Ratkaisumme tl; dr

Lyhyesti sanottuna, lisäämme valikon DOM: iin, ja samaan aikaan annamme seuraaville korteille negatiivisen käännöksenX, jotta ne näyttävät olevan samassa paikassa. Animoi sitten translateX saadaksesi mukavan, sileän animaation.

Lopettavat ajatukset

Tämä tekniikka on vakava optimointi yhdelle animaatiolle. Mutta kun sinulla on upea joukkue, sinulla on ylellisyyttä yrittää työntää selainta uusilla tavoilla. Lopullinen animaatio vastaa tarkalleen alkuperäisen periaatteen prototyyppiä. Voit nähdä sen osoitteessa Purple.pm - luo vain ilmainen tili ja siirry yhteen esimerkkihankkeista, joilla voit pelata.

Seuraa meitä Twitterissä osoitteessa @purpleapp kuullaksesi lisää tekemästämme ominaisuustyöstä!