Stop Animaties Tijdens Venster Resizing

0
10

Stel dat je pagina een bos van overgangen en animaties op allerlei elementen. Sommige van hen krijgen geactiveerd wanneer het venster wordt aangepast omdat ze te maken hebben met de grootte van de pagina of positie of vulling of iets. Het maakt eigenlijk niet uit wat het is, het feit dat de overgang of animatie kan bijdragen aan een gevoel van jankiness als u het formaat van het venster. Als die overgangen, animaties niet leveren geen voordeel in die scenario ‘ s, kunt u ze uit!

De truc is om het toepassen van een klasse die universeel schakelt alle overgangen en animaties:

laat resizeTimer;
venster.addEventListener(“grootte aanpassen”, () => {
document.lichaam.classList.toevoegen(“formaat wijzigen-animatie-stop”);
clearTimeout(resizeTimer);
resizeTimer = setTimeout(() => {
document.lichaam.classList.verwijderen(“formaat wijzigen-animatie-stop”);
}, 400);
});

Nu hebben we een formaat wijzigen-animatie-stop-klasse op de <body> die kunnen dwingen uitschakelen van de overgang of de animatie terwijl het venster wordt aangepast, en gaat weg na de time-out wist.

.formaat wijzigen-animatie-stopper * {
animatie: geen !belangrijk;
overgang: geen !belangrijk;
}

Er is waarschijnlijk wat meer performante manier om dit te doen dan setTimeout, maar dat is het concept. Ik gebruik dit recht hier op deze site (v17) na het opmerken van een aantal belangrijke resizing jank. Het is nog niet geheel verdwenen, de jank maar het is merkbaar beter.

Hier is een voorbeeld:

Zie de Pen
Zet de animatie op het formaat? door Chris Coyier (@chriscoyier)
op CodePen.

Die demo is meestal gewoon voor de werkende code. Er is waarschijnlijk niet genoeg zal zijn op de overgangen-het verstandig om op te merken veel resize jank.