Så du vil gerne animere visningsegenskaben

CSS-arbejdsgruppen gav det en thumbs-up for et par uger siden. Super-duper konceptuelle forslag er, at vi kan animere eller gå over fra f.eks. display: block til display: none.

Det er lidt af en brain-twister at ræsonnere om, fordi indstilling display: none på et element annullerer animationer. Og tilføjelse af det genstarter animationer. I henhold til spec:

Indstilling af display ejendom til none vil afslutte enhver kørende animation anvendt på elementet og dets efterkommere. Hvis et element har en visning af ingen, opdateres visningen til en anden værdi end none vil starte alle animationer anvendt på elementet af animation-name ejendom, samt alle animationer anvendt på efterkommere med display undtagen none.

Den cirkulære adfærd er det, der gør, at konceptet tilsyneladende er dødt ved ankomsten. Men if @keyframes støttede evt display værdi undtagen none, så er der ingen vej til none at annullere eller genstarte ting. Det giver ikke-none værdier prioritet, tillader none først at gøre det, når animationen eller overgangen er fuldført.

Miriams dytte (det er det, vi virkelig kalder disse, ikke?) forklarer, hvordan det kan fungere:

Vi interpolerer ikke ligefrem mellem f.eks. block , none, men tillader block at forblive intakt indtil det tidspunkt, hvor tingene holder op med at bevæge sig, og det er sikkert at anvende none. Disse er nøgleord, så der er ingen eksplicitte værdier mellem de to. Som sådan forbliver dette en diskret animation. Vi skifter mellem to værdier, når den animation er færdig.

Dette er den Robert Flack's eksempel trukket direkte fra diskussionen:

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

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

Dette er et nyttigt eksempel, fordi det viser, hvordan den første ramme indstiller elementet til display: block, som prioriteres over det underliggende display: none som en ikke-none værdi. Det gør det muligt for animationen at køre og afslutte uden none annullering eller nulstilling af det i processen, da det kun løses efter animationen.

Dette er eksemplet Miriam refererede til på Mastodon:

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

Vi har at gøre med en overgang denne gang. Det underliggende display værdien er indstillet til none før der sker noget, så det er helt ude af dokumentflowet. Hvis vi nu skulle overføre dette ved at svæve, måske sådan her:

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

…så skulle elementet teoretisk fade ind kl 200ms. Igen, vi skifter mellem display værdier, men block er prioriteret, så overgangen ikke annulleres på forhånd og faktisk anvendes efter opacity afslutter sin overgang.

Det er i hvert fald sådan, mit sind læser ind i det. Jeg er glad for, at der er superkloge mennesker, der tænker disse ting igennem, for jeg forestiller mig, at der er masser at ordne. Ligesom, hvad der sker, hvis flere animationer er tildelt til et element - vil none nulstille eller annullere nogen af ​​disse? Jeg er sikker på, at alt fra uendelige animationer, omvendte retninger og alle mulige andre ting vil blive behandlet med tiden.

Men sikke et super fedt første skridt!