U wilt dus de weergave-eigenschap animeren

De CSS-werkgroep gaf dat een paar weken geleden een duim omhoog. Het superduper conceptuele voorstel is dat we kunnen animeren of overgaan van, laten we zeggen, display: block naar display: none.

Het is een beetje een hersenkraker om over te redeneren vanwege de instelling display: none op een element annuleert animaties. En door het toe te voegen, worden animaties opnieuw gestart. Volgens de specificatie:

Het instellen van display eigendom aan none beëindigt elke actieve animatie die is toegepast op het element en zijn afstammelingen. Als een element geen weergave heeft, wordt de weergave bijgewerkt naar een andere waarde dan none zal alle animaties starten die op het element zijn toegepast door de animation-name eigenschap, evenals alle animaties toegepast op afstammelingen met display dan none.

Dat cirkelvormige gedrag maakt het concept bij aankomst schijnbaar dood. Maar if @keyframes ondersteund elke display waarde dan none, dan is er geen mogelijkheid voor none om dingen te annuleren of opnieuw op te starten. Dat geeft niet-none waarden prioriteit, toestaan none om zijn ding pas te doen nadat de animatie of overgang is voltooid.

van Miriam toeteren (zo noemen we deze echt, toch?) legt uit hoe dit zou kunnen werken:

We interpoleren niet precies tussen, laten we zeggen, block en none, maar toestaan block om intact te blijven totdat de dingen niet meer bewegen en het veilig is om aan te brengen none. Dit zijn trefwoorden, dus er zijn geen expliciete waarden tussen de twee. Als zodanig blijft dit een discrete animatie. We schakelen tussen twee waarden zodra die animatie is voltooid.

Dit is de Robert Flack's voorbeeld rechtstreeks uit getrokken de discussie:

@keyframes slideaway {
  from { display: block; }
  to { transform: translateY(40px); opacity: 0;}
}

.hide {
  animation: slideaway 200ms;
  display: none;
}

Dit is een handig voorbeeld omdat het laat zien hoe het eerste frame het element instelt display: block, die voorrang krijgt op de onderliggende waarde display: none als een niet-none waarde. Hierdoor kan de animatie worden uitgevoerd en voltooid zonder none annuleren of resetten tijdens het proces, omdat het alleen wordt opgelost na de animatie.

Dit is het voorbeeld waarnaar Miriam verwijst op Mastodon:

.hide {
  transition: opacity 200ms, display 200ms;
  display: none;
  opacity: 0;
}

We hebben dit keer te maken met een overgang. Het onderliggende display waarde is ingesteld op none voordat er iets gebeurt, dus het is volledig uit de documentenstroom. Als we dit nu bij zweven zouden overzetten, misschien als volgt:

.hide:hover {
  display: block;
  opacity: 1;
}

…dan zou het element theoretisch moeten infaden op 200ms. Nogmaals, we schakelen tussen display waarden, maar block prioriteit krijgt, zodat de overgang niet vooraf wordt geannuleerd en pas achteraf wordt toegepast opacity voltooit zijn overgang.

Zo lezen mijn gedachten er tenminste in. Ik ben blij dat er superslimme mensen zijn die over deze dingen nadenken, want ik kan me voorstellen dat er een hoop uit te zoeken is. Zoals, wat gebeurt er als meerdere animaties aan een element worden toegewezen - zal none een van deze resetten of annuleren? Ik weet zeker dat alles, van oneindige animaties, omgekeerde richtingen en allerlei andere dingen, op tijd zal worden aangepakt.

Maar wat een super toffe eerste stap!