De inspectie van Animaties in DevTools

0
51

Ik struikelde over het venster ‘Animatie’ in Chrome DevTools de andere dag en sprong bijna uit mijn stoel met pure vreugde. Niet alleen was ik helemaal niet van bewust dat er zoiets bestaat, maar het was beter dan wat ik zou kunnen hebben gehoopt: hiermee kunt u controleren en te manipuleren CSS-animaties en visualiseren hoe alles werkt onder de motorkap.

Om toegang te krijgen tot het paneel, ga naar Tools → Animaties in de rechterbovenhoek van het menu wanneer DevTools is open:

Veel van de tutorials die ik gevonden heb over dit waren vrij ingewikkeld, dus laten we eens een stap terug en kijk naar een kleinere voorbeeld om te beginnen: hier is een demo, waarbij de achtergrond-kleur van het html-element zal de overgang van zwart naar oranje op zweeftekst kan oproepen:

html {
cursor: pointer;
background-color: #333;
overgang: background-color 4s gemak;
}

html:hover {
background-color: #e38810;
}

Stel je voor dat we willen nudge, dat de overgang de tijd van de 4s. Het kan behoorlijk vervelend zijn slechts stoten dat aantal omhoog en omlaag in het element inspecteur. Typisch ik zou hebben geopend DevTools, vond het element in de DOM, en dan ooit-zo-langzaam manipuleren door te typen in een waarde of met behulp van het toetsenbord pijltjestoetsen. In plaats daarvan kunnen we vuur van die demo, open DevTools, en ga naar het tabblad Animatie die moet lijken op iets als dit:

Standaard Chrome is “luisteren” voor animaties plaatsvinden. Zodra ze dat doen, worden ze toegevoegd aan de lijst. Zie hoe deze animatie blokken worden weergegeven beetje zoals een audio wave? Dat is een frame, of de handeling, van een animatie en u kunt zien op de tijdlijn boven elk frame dat erop volgt. Op een animatie zelf, dan zal de inspecteur zelfs ons te laten zien welke eigenschap wordt gewijzigd, zoals de achtergrond, kleur of transformeren. Hoe netjes is dat?

We kunnen dan het wijzigen van de animatie door te pakken dat de bar en het verplaatsen over:

…en het werkt de animatie meteen niet meer te klikken en bewerken van een animatie op de oude manier! Ook, zou je hebben gemerkt dat de muis beweegt over een animatie frame wil gemarkeerde het element dat de animatie in het blauw. Dit is handig als u aan het bewerken bent een complexe animatie en vergeet wat die gekke rare pseudo-element doet. Als u meerdere animaties op een pagina, dan zie je ze allemaal vermeld in de sectie is net als in deze demo:

Wat we hier aan het doen bent is het animeren van beide .het plein en de .cirkel, als je op het html-element, dus er is in feite twee afzonderlijke divs animatie in dezelfde periode — dat is de reden waarom zie je ze in dezelfde sectie, net als dat.

Ik zie dat de inspectie animaties op deze manier zou super handig voor het kleine pictogram design. Neem de pen van het Hamburger menu-animaties door Jesse Bank waar wil je misschien langzaam alles af te krijgen. Nou, met de animatie inspecteur-tool kunt u precies dat doen:

Die knoppen in de linkerbovenhoek zal de controle van de snelheid van de animatie. Zo raken van 10% zal vertragen dingen op een crawl — geeft u genoeg tijd om echt futz met dingen tot ze perfect zijn.

Heb ik me gericht op Chrome hier, maar het is niet de enige browser met een animatie inspecteur — Firefox tool is in elk opzicht net zo handig. De enige direct het verschil vond ik was dat Chrome zal luisteren naar alle animaties op een pagina en geeft ze een keer hun gevangen genomen. Maar met Firefox, je moet inspecteren van het element en alleen dan zal het je laten zien de animaties zijn gekoppeld aan het element. Dus, als je aan het doen bent super complexe animaties, dan Chrome tool kan een smidge meer nuttig.

Animatie Inspecteur Documentatie

  • Walkthrough op voor Google-Ontwikkelaars
  • Animatie inspecteur in het Firefox – MDN