`view-transition-name` CSS property

Baseline 2025

Neu verfügbar

Seit October 2025 funktioniert diese Funktion auf aktuellen Geräten und in aktuellen Browserversionen. Auf älteren Geräten oder in älteren Browsern funktioniert sie möglicherweise nicht.

Die view-transition-name CSS Eigenschaft gibt an, welchen View Transition Snapshot die ausgewählten Elemente verwenden. Dadurch können Sie diese Elemente getrennt vom Rest der Seite animieren, welche während eines View Transitions die standardmäßige Überblendungsanimation verwendet. Sie können dann benutzerdefinierte Animationsstile für diese Elemente definieren.

Syntax

css

/* <custom-ident> value examples */
view-transition-name: header;
view-transition-name: figure-caption;

/* Keyword value */
view-transition-name: none;
view-transition-name: match-element;

/* Global values */
view-transition-name: inherit;
view-transition-name: initial;
view-transition-name: revert;
view-transition-name: revert-layer;
view-transition-name: unset;

Werte

<custom-ident>: Ein Identifikationsname, der dazu führt, dass das ausgewählte Element an einem separaten Snapshot vom Root-Snapshot teilnimmt. Der <custom-ident> kann nicht auto, match-element, none oder ein CSS-weites Schlüsselwort sein.
match-element: Der Browser weist dem ausgewählten Element automatisch einen eindeutigen Namen zu. Dieser Name wird verwendet, um das Element getrennt von allen anderen Elementen auf der Seite zu snapshotten. (Dieser Name ist intern und kann nicht aus dem DOM ausgelesen werden.)
none: Das ausgewählte Element wird nicht an einem separaten Snapshot teilnehmen, es sei denn, es hat ein Elternelement mit einem gesetzten view-transition-name, in diesem Fall wird es als Teil dieses Elements snapshotted.

Beschreibung

Standardmäßig, wenn ein View Transition auf eine Web-App angewendet wird, werden alle Änderungen an der Benutzeroberfläche, die während dieser Transition auftreten, gemeinsam snapshotted und animiert. Dies ist der Standard- oder root-Snapshot (siehe Der View Transition Pseudo-Elementbaum). Standardmäßig ist diese Animation eine sanfte Überblendung, die Sie in der View Transitions SPA Demo in Aktion sehen können.

Wenn Sie möchten, dass bestimmte Elemente während der View Transition anders als der root-Snapshot animiert werden, können Sie ihnen einen anderen view-transition-name geben, zum Beispiel:

css

figcaption {
  view-transition-name: figure-caption;
}

Danach können Sie angeben, welche Animationen Sie für die Vorher- und Nachher-Snapshots mithilfe der entsprechenden View Transition Pseudo-Elemente — ::view-transition-old() und ::view-transition-new() — möchten. Zum Beispiel:

css

::view-transition-old(figure-caption) {
  animation: 0.25s linear both shrink-x;
}

::view-transition-new(figure-caption) {
  animation: 0.25s 0.25s linear both grow-x;
}

Wenn Sie nicht möchten, dass ein Element separat snapshotted wird, können Sie den view-transition-name-Wert none angeben:

css

.dont-animate-me {
  view-transition-name: none;
}

Der view-transition-name <custom-ident> muss für jedes gerenderte Element, das an der View Transition teilnimmt, eindeutig sein. Wenn zwei gerenderte Elemente zur gleichen Zeit denselben view-transition-name haben, wird die ViewTransition.ready Promise abgelehnt und die Transition wird übersprungen.

Automatische Angabe von `view-transition-name` Werten

Manchmal möchten Sie mehrere Benutzeroberflächenelemente separat in einer View Transition animieren. Dies ist oft der Fall, wenn Sie eine Liste von Elementen auf einer Seite haben und diese in irgendeiner Weise umordnen möchten:

html

<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
  <li>Item 4</li>

  <!-- ... -->

  <li>Item 99</li>
</ul>

Jedem einen eindeutigen Namen zu geben kann umständlich sein, besonders wenn die Anzahl der Elemente größer wird:

css

li:nth-child(1) {
  view-transition-name: item1;
}
li:nth-child(2) {
  view-transition-name: item2;
}
li:nth-child(3) {
  view-transition-name: item3;
}
li:nth-child(4) {
  view-transition-name: item4;
}

/* ... */

li:nth-child(99) {
  view-transition-name: item99;
}

Um dieses Problem zu umgehen, können Sie den match-element Wert verwenden, der dazu führt, dass der Browser jedem ausgewählten Element einen eindeutigen internen view-transition-name gibt:

css

li {
  view-transition-name: match-element;
}

Da match-element automatische view-transition-name Werte basierend auf der Identität des Elements zuweist, kann es nur für View Transitions im selben Dokument verwendet werden. Die automatisch generierten internen Identifikatoren sind nicht übertragbar zwischen verschiedenen Elementen oder Dokumenten.

Formale Definition

Anfangswert	`none`
Anwendbar auf	alle Elemente
Vererbt	Nein
Berechneter Wert	wie angegeben
Animationstyp	diskret

Formale Syntax

view-transition-name = 
  none            |
  <custom-ident>

Beispiele

Grundlegende Verwendung von `view-transition-name`

Dieses Beispiel stammt aus der View Transitions SPA Demo, die eine grundlegende Fotogalerie ist. Der Grundlegende SPA View Transition bietet eine detaillierte Erklärung, wie diese Demo funktioniert.

Die meisten UI-Änderungen werden mithilfe des root Transition Snapshots animiert. Das <figcaption> jedoch erhält ein view-transition-name von figure-caption, um es von der restlichen Seite anders zu animieren:

css

figcaption {
  view-transition-name: figure-caption;
}

Der folgende Code wendet eine benutzerdefinierte Animation nur auf das <figcaption> an:

css

@keyframes grow-x {
  from {
    transform: scaleX(0);
  }
  to {
    transform: scaleX(1);
  }
}

@keyframes shrink-x {
  from {
    transform: scaleX(1);
  }
  to {
    transform: scaleX(0);
  }
}

::view-transition-group(figure-caption) {
  height: auto;
  right: 0;
  left: auto;
  transform-origin: right center;
}

::view-transition-old(figure-caption) {
  animation: 0.25s linear both shrink-x;
}

::view-transition-new(figure-caption) {
  animation: 0.25s 0.25s linear both grow-x;
}

Wir erstellen eine benutzerdefinierte CSS-Animation und wenden sie auf die ::view-transition-old(figure-caption) und ::view-transition-new(figure-caption) Pseudo-Elemente an. Wir wenden auch andere Stile an, um sie an derselben Stelle zu halten und zu verhindern, dass die Standard-Stilung unsere benutzerdefinierten Animationen beeinträchtigt.

Verwendung des `match-element` Werts

Dieses Beispiel enthält eine Liste von Technologien–HTML, CSS, SVG und JS–, die in einer Seitenleiste neben einem Hauptinhaltsbereich angezeigt werden, der anfänglich leer ist. Ein Klick auf die Überschrift einer Technologie animiert deren Inhalt in den angrenzenden Inhaltsbereich, der mehr Details anzeigt.

HTML

Das <main> Element enthält eine ungeordnete Liste und ein <article> Element. Die mehrfachen Kind-<li>-Elemente innerhalb der Liste enthalten jeweils ein <a> Element innerhalb einer Überschrift.

html

<main class="match-element-applied">
  <ul>
    <li>
      <h2><a href="#">HTML</a></h2>
      <h3>HyperText Markup Language</h3>
      <p>
        HyperText Markup Language (HTML) is the most basic building block of the
        web. It defines the meaning and structure of web content. HTML provides
        the fundamental building blocks for structuring web documents and apps.
      </p>
    </li>
    <li>
      <h2><a href="#">CSS</a></h2>
      <h3>Cascading Style Sheets</h3>
      <p>
        Cascading Style Sheets (CSS) is a stylesheet language used to describe
        the presentation of a document written in HTML or XML (including XML
        dialects such as SVG, MathML or XHTML). CSS describes how elements
        should be rendered on screen, on paper, in speech, or on other media.
      </p>
    </li>
    <li>
      <h2><a href="#">SVG</a></h2>
      <h3>Scalable Vector Graphics</h3>
      <p>
        Scalable Vector Graphics (SVG) is an XML-based markup language for
        describing two-dimensional based vector graphics.
      </p>
    </li>
    <li>
      <h2><a href="#">JS</a></h2>
      <h3>JavaScript</h3>
      <p>
        JavaScript (JS) is the web's native programming language. JavaScript is
        a lightweight, interpreted (or just-in-time compiled) programming
        language with first-class functions. While it is most well-known as the
        scripting language for web pages, many non-browser environments, such as
        Node.js, also use it.
      </p>
    </li>
  </ul>
  <article></article>
</main>

<form>
  <label for="match-element-checkbox">
    Apply <code>match-element</code> to list items?
  </label>
  <input type="checkbox" id="match-element-checkbox" checked />
</form>

CSS

Wir verwenden Flexbox, um die <li> und das <article> nebeneinander anzuordnen, und um sicherzustellen, dass die Listeneinträge den gleichen Raum im ersten Spaltenverhältnis teilen. Die Liste nimmt 35% der Breite des Containers ein, während das <article> den verbleibenden verfügbaren horizontalen Raum ausfüllt.

/* General styles and resets */
* {
  box-sizing: border-box;
  font-size: 0.9rem;
}

html {
  font-family: "Helvetica", "Arial", sans-serif;
  height: 100%;
}

body {
  margin: 0;
  height: inherit;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}
li h2 {
  margin: 0;
}

ul {
  padding: 0;
  margin: 0;
  list-style-type: none;
}

li {
  overflow: hidden;
  container-type: inline-size;
}

li p {
  display: none;
}

li.active-item p {
  display: block;
}

li:nth-child(1) {
  background-color: #cbc0d3;
  border: 20px solid #cbc0d3;
}

li:nth-child(2) {
  background-color: #efd3d7;
  border: 20px solid #efd3d7;
}

li:nth-child(3) {
  background-color: #feeafa;
  border: 20px solid #feeafa;
}

li:nth-child(4) {
  background-color: #dee2ff;
  border: 20px solid #dee2ff;
}

/* Links */

a {
  text-decoration: none;
  color: rgb(0 0 255 / 0.8);
}

a:hover,
a:focus {
  color: rgb(100 100 255);
}

/* Form and checkbox styles */
form {
  position: absolute;
  bottom: 0;
  right: 0;
  z-index: 2;
  background-color: white;
  padding: 10px;
  border: 1px solid black;
}

css

main {
  container-type: inline-size;
  width: 100%;
  height: 100%;
  display: flex;
  gap: 2cqw;
  position: relative;
}

ul {
  width: 35cqw;
  display: flex;
  flex-direction: column;
  gap: 1cqw;
}

article {
  flex: 1;
}

li {
  flex: 1;
}

Wir definieren auch eine Regel, die Elemente mit der active-item-Klasse auswählt. Wenn diese Klasse auf ein Element angewendet wird, bewirkt die Regel, dass es genau über dem <article> Element positioniert wird. Diese Klasse wird über JavaScript auf die Listeneinträge angewendet, wenn deren Links angeklickt werden, was eine View Transition initiiert.

css

.active-item {
  position: absolute;
  z-index: 1;
  translate: 37cqw;
  width: calc(100% - 37cqw);
  height: 100%;
}

Standardmäßig werden alle Elemente in einer View Transition gemeinsam in einer einzigen Überblendung animiert. In diesem Beispiel möchten wir das jedoch nicht – wir möchten, dass jeder Listeneintrag seine eigene Bewegungsanimation hat. Dies können wir erreichen, indem wir view-transition-name: match-element auf jeden Listeneintrag anwenden:

css

.match-element-applied li {
  view-transition-name: match-element;
}

Die match-element-applied Klasse wird standardmäßig auf das <main> Element angewendet, weswegen das Kontrollkästchen im Ergebnisfenster anfangs ausgewählt ist. Wenn Sie es abwählen, wird die Klasse entfernt und die standardmäßige Überblendungsanimation wird stattdessen wirksam. Sie können das Kontrollkästchen umschalten, um die Standardanimation mit derjenigen zu vergleichen, die angewendet wird, wenn view-transition-name: match-element verwendet wird.

Anschließend passen wir die Animation durch die Verwendung des ::view-transition-group() Pseudo-Elements an, um eine animation-duration auf alle View Transition Gruppen (angezeigt durch das * Kennzeichen) anzuwenden und allen alten und neuen Snapshots eine height von 100% zu geben. Dies behebt Unterschiede in den Seitenverhältnissen der alten und neuen Snapshots und lässt die Animationen glatter aussehen:

css

::view-transition-group(*) {
  animation-duration: 0.5s;
}

html::view-transition-old(*),
html::view-transition-new(*) {
  height: 100%;
}

JavaScript

In diesem Beispiel wird die active-item Klasse auf die Listeneinträge angewendet, wenn deren Links angeklickt werden; dies wird mittels der updateActiveItem() Funktion erreicht:

const mainElem = document.querySelector("main");
let prevElem;
let checkboxElem = document.querySelector("input");

// View transition code
function updateActiveItem(event) {
  // Get the list item that contains the clicked link
  const clickedElem = event.target.parentElement.parentElement;

  // Set the active-item class on the list item
  clickedElem.className = "active-item";

  // Keep track of the previous item that was clicked, if any.
  // Remove the active-item class from the previous item so that only
  // one list item is placed over the <article> at any one time
  if (prevElem === clickedElem) {
    prevElem.className = "";
    prevElem = undefined;
  } else if (prevElem) {
    prevElem.className = "";
    prevElem = clickedElem;
  } else {
    prevElem = clickedElem;
  }
}

mainElem.addEventListener("click", (event) => {
  event.preventDefault(); // Prevent iframe from scrolling when clicked
  // Do nothing unless a link is clicked inside the <main> element
  if (event.target.tagName !== "A") {
    return;
  }

  // Run updateActiveItem() on its own if view transitions are not supported
  if (!document.startViewTransition) {
    updateActiveItem(event);
  } else {
    // Run updateActiveItem() via startViewTransition()
    const transition = document.startViewTransition(() =>
      updateActiveItem(event),
    );
  }
});

// Toggle the class on <main> to control whether or not match-element is applied

checkboxElem.addEventListener("change", () => {
  mainElem.classList.toggle("match-element-applied");
});

Das Ausführen der updateActiveItem() Funktion über die startViewTransition() Funktion animiert die Anzeige der Technologiedetails reibungslos.

Ergebnis

Klicken Sie auf eine Technologieüberschrift in der Seitenleiste und beachten Sie den Animationseffekt ihres Inhalts in den Hauptinhaltsbereich.

Es gibt auch ein Kontrollkästchen, das standardmäßig ausgewählt ist, sodass view-transition-name: match-element angewendet wird. Deaktivieren Sie das Kontrollkästchen und klicken Sie erneut auf eine Überschrift, um zu sehen, wie die View-Transition ohne view-transition-name: match-element funktioniert.

Spezifikationen

Spezifikation
CSS View Transitions Module Level 1 # view-transition-name-prop

Browser-Kompatibilität

Siehe auch

Help improve MDN

Erfahren Sie, wie Sie beitragen können Diese Seite wurde automatisch aus dem Englischen übersetzt.

Übersetzung auf GitHub anzeigen • Fehler mit dieser Übersetzung melden

view-transition-name CSS property

HTML

CSS

JavaScript

Ergebnis

Help improve MDN

`view-transition-name` CSS property