Wie benutzt man die View-Transition-Api in Nuxt 3?

Vorab: aktuell funktioniert dieses Feature nur in aktuellen Chromium-basierten Browsern!

Aktivieren des Features

Der erste Schritt zur Nutzung ist die Aktivierung des Features in der Nuxt-Konfigurationsdatei wie folgt:

// nuxt.config.ts
export default defineNuxtConfig({
  experimental: {
    viewTransition: true
  }
})

Das war's eigentlich schon! Eine Zeile und man sieht standardmäßig Überblendungen bei Seitenübergängen. Ist das nicht cool?! 😍

Die Transition anpassen

Das ist schon toll! Aber wir können uns noch mehr einfallen lassen 🪄. Für meine Website wollte ich, dass sich die Vorschau eines Blogartikels in die Detailansicht ausdehnt, anstatt eine Überblendung vorzunehmen, da sie ein sehr ähnliches Layout haben. Dies lässt sich ganz einfach erreichen, indem man die entsprechenden Elemente auf der Seite mit der gleichen Eigenschaft view-transition-name kennzeichnet. Der Wert der Eigenschaft dient als eindeutiger Bezeichner von Elementen, die so behandelt werden sollen, als ob sie gleich wären, auch über verschiedene Seiten hinweg.

<!-- Blogarticle.vue -->
<template>
    <article class="article">
      ...
    </article>
</template>
<style scoped>
.article {
  view-transition-name: blogarticle;
}
</style>

<!-- BlogarticlePreview.vue -->
<template>
  <div class="article">
    ...
  </div>
</template>

<style scoped>
.article {
  view-transition-name: blogarticle;
}
</style>

Probier es aus! Gehe auf meine Blog-Übersicht und klicke auf die Vorschau eines Artikels! Ziemlich cool, was?! 🤩

Man kann mit dieser neuen API sogar noch viel komplexere Übergänge umsetzen, das ist ziemlich faszinierend. Hier kann man mehr darüber lesen.

Gotcha

Im Moment muss man sich nur um eine Sache manuell kümmern, und das ist der Fall, wenn man Elemente von einer Listenansicht in eine Detailansicht überführen will. Es darf die Eigenschaft view-transition-name nur für das "aktive" Element gesetzt werden, also das Element, auf das der Benutzer geklickt hat. Aber das kann leicht mit einem Click-Handler wie diesem erreicht werden:

<!-- BlogarticlePreview.vue -->
<script setup lang="ts">
const transitionNameActive = ref(false)
const handleClick = () => {
  transitionNameActive.value = true;
}
</script>

<template>
  <div class="article" :class="{ transition: transitionNameActive }">
    <nuxt-link :to="PATH_TO_ARTICLE" @click="handleClick">
      ...
    </nuxt-link>
  </div>
</template>

<style lang="scss" scoped>
.article {
  ...

  &.transition {
    view-transition-name: blogarticle;
  }
}
</style>

Hier verwende ich eine konditionale CSS-Klasse, die die Eigenschaft view-transition-name erst dann setzt, wenn der Link angeklickt wurde.