Den her gleder jeg meg til, for det kommer til å forenkle måten jeg lager inn- og ut-animasjoner på! Tidligere har jeg fått til dette med en kombinasjon av tilstandshåndtering i javascript ved å skru av og på klasser, og eventer som onAnimationEnd.

Med @starting-style kan man nå definere “start”-stiler for et element når den er først rendret. I dette eksempelet vil bakgrunnsfargen starte usynlig og bli lilla etter første render.

div {
  transition: background-color 1.5s;
  background-color: rebeccapurple;
}

@starting-style {
  div {
    background-color: transparent;
  }
}

Men man kan også definere hvilke stiler et element skal ha hvis man endrer display mellom block og none. Her vil elementet endre gjennomsiktighet mens man endrer på display.

div {
  transition-property: opacity, display;
  transition-behavior: allow-discrete;
  transition-duration: 0.5s;
  display: block;
  opacity: 1;
  
  @starting-style {
    opacity: 0;
  }
}

div.hidden {
  display: none;
  opacity: 0;
}

Mer at her er også transition-behavior: allow-discrete brukt for å kunne animere ut-animasjonen, for ellers ville elementet fått verdien display: none før den rekker å animere ferdig.

Denne regelen er ganske godt støttet, med unntak av Firefox, så dessverre kan vi ikke ta den i bruk helt enda, men jeg venter i spenning!