view-transition-name

Die CSS-Eigenschaft view-transition-name identifiziert eindeutig ein Element, das in einem Ansichtsübergang verwendet werden kann.

card {
  view-transition-name: card-transition;
}

Wir geben dem Element einen Namen (d. h. <custom-ident>), auf den wir verweisen, oder setzen die Eigenschaft auf none, um das Element von View-Übergängen auszuschließen.

Die Spezifikation ist noch kein Standard, beschreibt view-transition-name jedoch als eine Möglichkeit, „individuell übergreifende Teilbäume zu taggen“, was eine sehr schicke Art ist zu sagen, dass wir möchten, dass ein bestimmtes Element in einem View-Übergang erfasst wird. Wenn wir einem Element einen view-transition-name geben, geben wir ihm effektiv Zugriff auf eine Reihe von Pseudo-Elementen zur Erstellung eines View-Übergangs.

Syntax

view-transition-name: none | <custom-ident>;

• Initialwert: none
• Anwendbar auf: Alle Elemente
• Vererbt: Nein
• Prozentangaben: N/A
• Berechneter Wert: Wie angegeben
• Kanomische Reihenfolge: Nach Grammatik
• Animationstyp: diskret

Eigenschaftswerte & Beschreibungen

/* <custom-ident> */
view-transition-name: banner;
view-transition-name: banner-transition;
view-transition-name: bannerTransition;

/* Keyword */
view-transition-name: none;

• <custom-ident>: Ein eindeutiger Bezeichner, der verwendet wird, um ein Element zu definieren, das an einem View-Übergang teilnehmen kann, sei es das „alte“ Element oder das „neue“, zu dem übergeblendet wird. Wir können die Wörter none oder auto nicht für den Wert verwenden, da dies reservierte globale Schlüsselwortwerte sind.
• none: Entfernt das Element von der Teilnahme an einem View-Übergang.

Was zum Teufel ist ein „erfasstes Element“?

Es ist erwähnenswert, da die Spezifikation genau so ein Element mit einem deklarierten view-transition-name beschreibt. Die Grundidee von View-Übergängen ist, dass wir einen bestehenden Zustand als Bild „erfassen“ und zwischen diesem Schnappschuss und einem neuen Element überblenden.

Wenn wir ein Element „erfassen“, verfolgen wir es quasi während der Lebensdauer des View-Übergangs, während dem das Element verschiedene Formen annimmt. Hier ist der Prozess, dem ein erfasstes Element folgt, wie von der Spezifikation bereitgestellt, die weiter geht, indem sie ein erfasstes Element als „Struct“ oder eine Menge von Elementen bezeichnet.

• altes Bild: Eine 2D-Bitmap oder null. Anfangs null.
• alte Breite / alte Höhe: ein unrestricted double, anfänglich null.
• alte transform: eine <transform-function>, anfänglich die Identitäts-Transformationsfunktion.
• alter writing-mode: Null oder ein writing-mode, anfänglich null.
• alte direction: Null oder eine direction, anfänglich null.
• alte text-orientation: Null oder eine text-orientation, anfänglich null.
• alter mix-blend-mode: Null oder ein mix-blend-mode, anfänglich null.
• alter backdrop-filter: Null oder ein backdrop-filter, anfänglich null.
• altes color-scheme: Null oder ein color-scheme, anfänglich null.
• neues Element: Ein Element oder null. Anfänglich null.

Das sind alle Teile eines erfassten Elements, die in einem View-Übergang verwendet werden. Wir erfassen eine Reihe von Informationen über den aktuellen (oder „alten“) Zustand eines Elements und überblenden es in ein neues Element.

Der Name muss eindeutig sein

Wir können einem View-Übergang jeden beliebigen Namen geben (none und auto sind die einzigen Ausnahmen), aber er muss eindeutig sein, in dem Sinne, dass er nur auf ein gerendertes Element auf der aktuellen Seite angewendet wird.

Das Schlüsselwort dort ist „gerendert“, da wir technisch gesehen denselben view-transition-name für mehrere Elemente wiederverwenden können. Sie möchten zum Beispiel denselben Übergang für eine Reihe von Bildern, möchten aber nicht die Arbeit auf sich nehmen, jedes einzelne zu benennen. Wir können stattdessen view-transition-name auf eine bestimmte Klasse setzen

.image-transition {
  view-transition-name: image-zoom;
}

Dann können wir JavaScript einrichten, das für jedes Bild im Set eine Variable setzt, die Klasse .image-transition zu den Bildern hinzufügt und dann den Übergang mit einer Aktion – wie einem Klick-Handler – auf dem Bild auslöst. Von dort wartet das Skript, bis der Übergang abgeschlossen ist, und entfernt dann die Klasse .image-transition, damit sie auf ein anderes angeklicktes Bild angewendet werden kann.

// Create a variable for img elements in a .gallery
const image = document.querySelectorAll(".gallery img");

// When an image is clicked...
image.onclick = () => {
  // If view transitions are *not* supported
  if (!document.startViewTransition) {
    // Run a fallback function
    doSomething(image);
  // If view transitions are supported
  } else {
    // Add the .image-transition class to the clicked image
    image.classList.add("image-transition");

    // Start the transition and save its instance in a variable
    const transition = document.startViewTransition(() => doSomething(image));

    // Wait for the transition to finish.
    await transition.finished;

    // Remove the class when finished
    image.classList.remove("image-transition");
  }
};

Ein anderer Ansatz ist, view-transition-name auf ein <custom-ident> auf dem angeklickten Bild zu setzen, zu warten, bis der Übergang läuft, und dann das <custom-ident> durch den Wert none zu ersetzen.

// Create a variable for img elements in a .gallery
const image = document.querySelectorAll(".gallery img");

// When an image is clicked...
image.onclick = () => {
  // First, check if view transitions are supported
  if (!document.startViewTransition) {
    // Fallback if View Transitions API is not supported.
    doSomething(image);
  } else {
    // Set `view-transition-name` with a <custom-ident>
    image.style.viewTransitionName = "image-zoom";

    // Start the transition and save its instance in a variable
    const transition = document.startViewTransition(() => doSomething(image));

    // Wait for the transition to finish.
    await transition.finished;

    // Set the transition name to `none` when finished
    image.style.viewTransitionName = "none";
  }
};

Spezifikation

Die Eigenschaft view-transition-name ist nur eine von mehreren view-* Eigenschaften, die zusammen verwendet werden, um View-Übergänge zu registrieren und zu verwalten, die Teil der View Transitions Module Level 1 Spezifikation sind. Diese ist derzeit ein Candidate Recommendation Snapshot, was bedeutet, dass sie dort verwendet werden kann, wo sie verfügbar ist, aber gerade Feedback sammelt, bevor sie formell empfohlen wird. Mit anderen Worten, view-transition-name und andere verwandte Eigenschaften sind experimentell und noch kein Teil der Standards.

Browser-Unterstützung

Im Moment sind es nur Chrome und andere Chromium-basierte Browser. Behalten Sie die Caniuse-Seiten für die aktuellsten Unterstützungsinformationen für die view-transition-name Eigenschaft und die Unterstützung für den Wert none im Auge.

Was die Browserunterstützung betrifft, können wir die Eigenschaft view-transition-name verwenden, um zu prüfen, ob der Browser des Benutzers die View Transitions API unterstützt, und eine Fallback-Lösung für Browser bereitzustellen, die sie nicht unterstützen. Wir könnten einen <custom-ident>-Wert zur Unterstützung prüfen, aber der Wert none ist wahrscheinlich eine bessere Wahl, da es sich um ein konsistentes Schlüsselwort handelt und wir diesen Wert definitiv unterstützt haben wollen, wenn wir sowieso mit View-Übergängen arbeiten.

/* If the View Transitions API is supported */
@supports (view-transition-name: none) {

}

/* If the View Transitions API is *not* supported */
@supports not (view-transition-name: none) {
  /* Use a simple CSS animation if possible */
}

Ebenso können wir die Unterstützung auch über JavaScript prüfen.

// If the View Transitions API is *not* supported.
if (!document.startViewTransition) {
  doSomething());

// Otherwise, start the view transition 
} else {
  document.startViewTransition(() => doSomething());
}

Verwandt