Så du vil animere visningsegenskapen

CSS-arbeidsgruppen ga det en tommel opp for et par uker siden. Super-duper konseptuelle forslaget er at vi kan animere eller gå over fra for eksempel, display: block til display: none.

Det er litt av en brain-twister å resonnere om fordi innstillingen display: none på et element kansellerer animasjoner. Og å legge til det starter animasjoner på nytt. I henhold til spesifikasjonen:

Innstilling av display eiendom til none vil avslutte enhver kjørende animasjon brukt på elementet og dets etterkommere. Hvis et element har ingen visning, oppdaterer visningen til en annen verdi enn none vil starte alle animasjoner brukt på elementet av animation-name eiendom, samt alle animasjoner brukt på etterkommere med display unntatt none.

Den sirkulære oppførselen er det som gjør konseptet tilsynelatende dødt ved ankomst. Men if @keyframes støttet noen display verdi unntatt none, da er det ingen vei for none for å avbryte eller starte ting på nytt. Det gir ikke-none verdier prioritet, tillater none å gjøre tingen sin først etter at animasjonen eller overgangen er fullført.

Miriam sin Toot (det er dette vi egentlig kaller disse, ikke sant?) forklarer hvordan dette kan fungere:

Vi interpolerer ikke akkurat mellom f.eks. block og none, men tillater block for å forbli intakt til det tidspunktet ting slutter å bevege seg og det er trygt å søke none. Dette er nøkkelord, så det er ingen eksplisitte verdier mellom de to. Som sådan forblir dette en diskret animasjon. Vi veksler mellom to verdier når den animasjonen er fullført.

Dette er Robert Flacksitt eksempel hentet rett fra diskusjonen:

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

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

Dette er et nyttig eksempel fordi det viser hvordan den første rammen setter elementet til display: block, som prioriteres fremfor det underliggende display: none som en ikke-none verdi. Det gjør at animasjonen kan kjøre og fullføre uten none avbryte eller tilbakestille det i prosessen siden det bare løser seg etter animasjonen.

Dette er eksemplet Miriam refererte til på Mastodon:

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

Vi har å gjøre med en overgang denne gangen. Det underliggende display verdien er satt til none før noe skjer, så det er helt ute av dokumentflyten. Nå, hvis vi skulle overføre dette på hover, kanskje slik:

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

… så skal elementet teoretisk tone inn kl 200ms. Igjen, vi veksler mellom display verdier, men block blir prioritert slik at overgangen ikke avbrytes på forhånd og faktisk brukes etterpå opacity fullfører overgangen.

Det er i hvert fall slik tankene mine leser inn i det. Jeg er glad det er supersmarte mennesker som tenker gjennom disse tingene, for jeg ser for meg at det er mye å ordne opp i. Som, hva skjer hvis flere animasjoner er tilordnet et element - vil none tilbakestille eller avbryte noen av disse? Jeg er sikker på at alt fra uendelige animasjoner, omvendte retninger og alle mulige andre ting vil bli tatt opp med tiden.

Men for et superkult første steg!