De Web Animations API , die voor het eerst werd geleverd in Chrome 36, biedt handige JavaScript-controle van animaties in de browser en wordt ook geïmplementeerd in Gecko en WebKit.
Chrome 50 introduceert wijzigingen om de interoperabiliteit met andere browsers te verbeteren en beter aan de specificaties te voldoen. Deze veranderingen zijn:
- Annuleer evenementen
-
Animation.id - Statuswijziging voor de methode
pause() - Beëindiging van gestippelde namen als sleutels in hoofdframes
In Chrome 51 zijn enkele van deze wijzigingen voltooid:
- Gestreepte namen verwijderen als sleutels in hoofdframes
Annuleer evenementen
De Animatie- interface bevat een methode om een animatie te annuleren, grappig genoeg genaamd cancel() . Chrome 50 implementeert het activeren van de annuleringsgebeurtenis wanneer de methode wordt aangeroepen volgens de specificatie, waardoor de gebeurtenisafhandeling wordt geactiveerd via het oncancel attribuut als deze is geïnitialiseerd.
Ondersteuning voor Animation.id
Wanneer u een animatie maakt met element.animate() kunt u een aantal eigenschappen doorgeven. Hier is bijvoorbeeld een voorbeeld van het animeren van de dekking van een object:
element.animate([ { opacity: 1 }, { opacity: 0 } ], 500);
Door de eigenschap id op te geven, wordt deze ingesteld op het geretourneerde animatieobject , wat kan helpen bij het debuggen van uw inhoud als u met veel animatieobjecten te maken heeft. Hier is een voorbeeld van hoe u een id opgeeft voor een animatie die u instantieert:
element.animate([{opacity: 1}, {opacity: 0}], {duration: 500, id: "foo"});
Statuswijziging voor de methode pause().
De methode pause() wordt gebruikt om een lopende animatie te pauzeren. Als u de status van de animatie controleert met behulp van het playState attribuut, moet deze worden ingesteld op paused nadat de methode paused() is aangeroepen. In Chrome-versies vóór 50 zou het playState attribuut ' idle aangeven als de animatie nog niet was gestart, maar nu geeft het de juiste status weer: paused .
Gestreepte namen verwijderen als sleutels in hoofdframes
Om verder te voldoen aan de specificatie. en andere implementaties stuurt Chrome 50 een waarschuwing naar de console als streepjesnamen worden gebruikt voor sleutels in keyframe-animaties. De juiste tekenreeksen die moeten worden gebruikt, zijn camelCase-namen volgens de CSS-eigenschap voor het IDL- attribuutconversie-algoritme .
Voor de CSS-eigenschap margin-left moet u bijvoorbeeld marginLeft als sleutel doorgeven.
Chrome 51 verwijdert de ondersteuning voor streepjesnamen helemaal, dus dit is een goed moment om bestaande inhoud met de juiste naamgeving volgens de specificaties te corrigeren.
Samenvatting
Deze veranderingen brengen Chrome's implementatie van webanimaties dichter bij andere browserimplementaties en voldoen beter aan de specificatie, wat allemaal helpt bij het vereenvoudigen van het schrijven van webpagina-inhoud voor een betere interoperabiliteit.