Sluta Animationer Under Storleksförändring

0
14

Säg att du har en sida som har en massa övergångar och animeringar på alla typer av element. Några av dem aktiveras när fönstret ändrar storlek eftersom de har att göra med storleken på sidan eller position eller utfyllnad eller något. Det spelar egentligen ingen roll vad det är, det faktum att övergången eller animation körs kan bidra till en känsla av jankiness som du ändrar storlek på fönstret. Om de övergångar och animeringar inte ger någon fördel i dessa scenarier, kan du stänga av dem!

Tricket är att använda en klass som allmänt stänger alla övergångar och animeringar:

låt resizeTimer;
fönster.addEventListener(“ändra storlek”, () => {
dokumentet.organ.classList.lägga till(“ändra storlek-animation-propp”);
clearTimeout(resizeTimer);
resizeTimer = setTimeout(() => {
dokumentet.organ.classList.ta bort(“ändra storlek-animation-propp”);
}, 400);
});

Nu har vi en resize-animation-propp klass på <body> – som kan tvinga inaktivera eventuell övergång eller en animering medan fönstret är att ändra storlek på, och går bort efter timeout rensar.

.ändra storlek på-animation-propp * {
animation: inga !viktigt.
övergång: inga !viktigt.
}

Det är förmodligen lite mer prestanda sätt att göra detta än setTimeout, men det är konceptet. Jag använder denna just här på denna mycket plats (v17) efter märker några betydande storlek jank. Det har inte helt elimineras jank, men det är märkbart bättre.

Här är ett exempel:

Se Pennan
Stänga av animeringen på ändra storlek? av Chris Coyier (@chriscoyier)
på CodePen.

Att en demo är mest bara för fungerande kod. Det är förmodligen inte tillräckligt för att gå på övergångar-klokt att märka mycket ändra storlek jank.