Tilbage til Details og accordion

1. semester / Tema 4: Grundlæggende UI

Animér details-indhold

Brug `::details-content` og `interpolate-size` til blødere åbn/luk-overgange.

Se undervisningsslides

Relevante links

TL;DR

  1. summary::after kan bruges til visuel feedback i titlen.
  2. ::details-content rammer det indhold, der foldes ud.
  3. height: 0 til height: auto kræver lidt ekstra, hvis det skal animeres pænt.
  4. interpolate-size er relevant, når du vil animere mod nøgleord som auto.

Hvis du kun husker én ting: Giv brugeren et tydeligt åbn/luk-signal, og lad animationen støtte forståelsen i stedet for at være pynt.

Giv brugeren et tydeligt hint

Ud over selve åbn/luk-adfærden kan du også vise visuelt, at noget ændrer sig.

Et eksempel er at styre en pil eller et ikon med CSS:

summary::after {
  content: "+";
}


[open] summary::after {
  content: "−";
}

Det gør interaktionen lettere at afkode.

Animér selve indholdet

Når du vil animere det område, der åbner, kan du bruge ::details-content:

<details name="something">
  <summary>Titel</summary>
  <div>
    <!-- indhold -->
  </div>
</details>
::details-content {
  height: 0;
  overflow: clip;
  transition: .3s allow-discrete;
}


[open]::details-content {
  height: auto;
}

Det peger meget præcist på det indhold, der foldes ud og skjules igen.

Hvorfor interpolate-size dukker op

Når noget skal animere fra 0 til auto, er det ikke altid nok med en almindelig transition. Derfor er interpolate-size relevant i den type løsning.

Det er også derfor, det giver mening at øve princippet isoleret først.

Øvelse

Her arbejder du med netop idéen om at interpolere størrelse mere blødt: