Oprettelse af glatte CSS-animationer - selv med en tung DOM

Dette er en opfølgning af ”Den store livscyklus for en lille produktændring”, der dækker vores designproces for denne funktion.

Lilla tavler kan være temmelig tunge i DOM - vi indlæser alle dine dokumenter, design, prototyper og opgaver på et enkelt projektbord. Men dette betyder også, at vi skal være meget forsigtige med, hvordan vi implementerer animationer. Da vi implementerede den redesignede strøm til indsættelse af et kort i dit projekt, brugte vi en fin teknik, som vi ikke har set skrevet om andetsteds. Så vi troede, vi ville dele!

Dette var, hvad vi forsøgte at bygge med dette projekt - muligheden for at indsætte et kort mellem to eksisterende kort i stedet for lige ved slutningen.

Oprettelse af et kort midt i dit projekt

Vores første iteration af implementering af denne interaktion mislykkedes fuldstændigt. Udfordringen var at animere udvidelsen af ​​menuen Nyt kort.

Udfordringen: Udvide bredden på den nye kortmenu, og skub de efterfølgende kort til højre

I mellem hvert kort satte vi en 0px bred beholder til menuen Nyt kort. Ved at klikke på + -knappen overførte vi breddeegenskaben for denne container fra 0 til 400 px.

Containerens bredde gik fra 0px til 400 px, hvilket afslører menuen Nyt kort.

Det resulterede i en framerate på 2-10 fps under animationen. Hvorfor? Når du ændrer CSS-egenskaber som bredde, højde, margin, polstring osv., Skal browseren køre det, der kaldes "layout". Da bredden af ​​et element kan ændre bredden eller placeringen af ​​et andet element, hvilket vil påvirke andre elementer, skal browseren genberegne dimensionen og placeringen af ​​hvert DOM-element på skærmen. Så det gør alle slags beregninger. Hver. Enkelt. Ramme.

The Better Way®

Hvad vi gjorde i stedet involverer noget CSS-trickery, så lad os tage det trin for trin.

  1. Klik på knappen +
  2. Indsæt den nye kortmenu i DOM
  3. Anvend transform: translateX (-400px) på hvert af de efterfølgende kort
  4. Begynd med at animere den translateX egenskab fra -400px til 0px på hvert af de efterfølgende kort

Okay, lad os se hvert af disse trin visuelt.

  1. Bruger klik på knappen +

Store!

2. Tilføj den nye kortmenu i DOM.

Tilføjelse af menuen i DOM udløser layout, men kun én gang - og det sker, før animationen starter. Men når vi først har tilføjet menuen til DOM, springer de efterfølgende kort over til højre.

Det ønsker vi naturligvis ikke. Så hvad nu?

3. Anvend transform: translateX (-400px)
Sammen med trin 2 anvender vi straks transform: translateX (-400px) på hvert efterfølgende kort. Dette gør det således, at de efterfølgende kort ser ud som om de er på samme sted som da de startede. Se nedenunder.

Hvis du bad DOM om placeringen af ​​det andet kort efter anvendelse af translateX, ville det stadig give dig koordinaterne, som om det stadig var i den lyserøde boks. Men visuelt overføres det til venstre. Derfor er transform: translate så stor - det udløser ikke massive ændringer til DOM, så layout kører ikke.

I orden! Nu kan vi animere det kort til højre.

4. Start med at animere egenskaben translateX
Tid til at køre den faktiske animation. Vi overfører blot fra translateX (-400px) til translateX (0px) på de efterfølgende kort. Layout kører ikke hver ramme, så de glat animeres.

Tl; dr. For vores løsning

Kort sagt tilføjer vi menuen til DOM, og på samme tid giver vi de efterfølgende kort et negativt oversætX, så de ser ud som om de er på samme sted. Animer derefter translateX for en dejlig glat animation.

Lukende tanker

Denne teknik er en seriøs optimering for en enkelt animation. Men når du har et godt team, har du luksusen til at prøve at skubbe browseren på nye måder. Den endelige animation matcher nøjagtigt med vores oprindelige prototype. Du kan se det på Purple.pm - bare oprette en gratis konto og hoppe ind i et af eksemplerne, som du kan lege med.

Følg os på Twitter på @purpleapp for at høre mere om det funktionsarbejde, vi udfører!