Tilbake

Luke 3

Sindre BøyumSanta hat

View Transitions er nesten for lett!

Av Sindre Bøyum

Det kan være vanskelig å lage gode CSS-animasjoner. Skal man gjøre noe komplekst som innebærer å flytte rundt på elementer så er det lett å ty til store JavaScript-biblioteker istedenfor å skrive masse matematikk og store utregninger selv.

For noen år siden ble View Transitions introdusert i nettlesere. Dette gjør det mulig å animere mellom to forskjellige "views" av en nettside, uten å måtte skrive masse komplisert JavaScript-kode. Selv om navnet gir inntrykk av at View Transitions kun kan brukes når brukeren bytter side, kan det også brukes til å animere mellom forskjellige tilstander på samme side!

Hvordan?

Vi trenger bare å fortelle nettleseren når vi ønsker å starte en overgang mellom to visninger med document.startViewTransition, og så må vi "tagge" de elementene vi ønsker å animere med view-transition-name i CSS:

<h1>Julegaveliste</h1>
<ul>
  <li style="view-transition-name: ullsokker">Ullsokker</li>
  <li style="view-transition-name: prinsesselego">Prinsesselego</li>
  <li style="view-transition-name: askepott">Tre nøtter til Askepott på DVD</li>
</ul>

<script>
  function handleGiftBought(giftElement) {
    document.startViewTransition(() => {
      giftElement.remove();
    });
  }
</script>

Det er det! Når vi kaller startViewTransition vil nettleseren ta seg av resten. Den vil finne posisjonene til gavene før og etter en gave forsvinner, regne ut forskjellen, og animere gavene som flytter seg ved å bruke transform. Alt dette skjer uten at vi trenger å skrive noe ekstra kode! 🤩

View Transitions støttes av nesten 90% av nettleser-brukere, så nå tenker jeg at det bare er å begynne å bruke det!

Mer lesestoff:

ForrigeNeste