ViewTransition: types-Eigenschaft

Wert

Ein ViewTransitionTypeSet. Dies ist ein Set-ähnliches Objekt, was bedeutet, dass Sie die auf eine Ansichtstransition angewendeten Typen direkt mithilfe der verfügbaren Methoden wie clear(), add() und delete() ändern können.

Beispiele

Grundlegende Nutzung

Dieses Beispiel enthält ein grundlegendes Dokument, das zwischen zwei verschiedenen Inhaltsstücken wechselt. Wir bieten drei Schaltflächen an, von denen jede die Transition auslöst, jedoch mit einem unterschiedlichen type, um eine andere Art von Animation auf die Transition anzuwenden.

HTML

Das Markup enthält ein einzelnes <p>-Element, um den Inhalt zu enthalten, und drei <button>-Elemente, um die Ansichtstransition auszulösen.

<p>This is my first piece of content. I hope you like it!</p>
<div>
  <button id="default">Default</button>
  <button id="slide">Slide</button>
  <button id="flip">Flip</button>
</div>

JavaScript

In unserem Skript erstellen wir Referenzen auf die Schaltflächen und den Inhaltsabsatz und speichern dann unsere zwei verschiedenen Inhaltsstücke in zwei Konstanten.

const defaultBtn = document.getElementById("default");
const slideBtn = document.getElementById("slide");
const flipBtn = document.getElementById("flip");
const content = document.querySelector("p");

const first = "This is my first piece of content. I hope you like it!";
const second =
  "This is my second piece of content. Is it better than the first?";

Als Nächstes fügen wir den Schaltflächen click-Ereignislistener hinzu; wenn sie angeklickt werden, wird die Funktion changeContent() ausgeführt.

defaultBtn.addEventListener("click", changeContent);
slideBtn.addEventListener("click", changeContent);
flipBtn.addEventListener("click", changeContent);

Schließlich definieren wir die Funktion changeContent(). Wir beginnen damit, die Methode startViewTransition() aufzurufen, um den Inhalt zu aktualisieren und die Transition zu starten. Das zurückgegebene ViewTransition-Objekt wird in der Konstanten vt gespeichert. Innerhalb von startViewTransition() überprüft der update-Callback, ob der textContent des Absatzes gleich dem String first ist. Wenn ja, setzen wir es auf den String second. Wenn nicht, setzen wir es auf den String first.

Im zweiten Teil der Funktion changeContent() überprüfen wir den Wert des click-Ereignisziels:

• Wenn es die "Slide"-Schaltfläche ist, fügen wir mithilfe von vt.types.add("slide") einen slide-Typ zu den Typen der aktiven Ansichtstransition hinzu.
• Wenn es die "Flip"-Schaltfläche ist, fügen wir mithilfe von vt.types.add("flip") einen flip-Typ zu den Typen der aktiven Ansichtstransition hinzu.
• Wir unternehmen nichts, wenn die "Default"-Schaltfläche gedrückt wurde. In diesem Fall möchten wir die Standard-Cross-Fade-Animation der Ansichtstransition verwenden.

function changeContent(e) {
  const vt = document.startViewTransition({
    update() {
      content.textContent === first
        ? (content.textContent = second)
        : (content.textContent = first);
    },
  });

  if (e.target === slideBtn) {
    vt.types.add("slide");
  } else if (e.target === flipBtn) {
    vt.types.add("flip");
  }
}

CSS

In unseren Styles beginnen wir mit der Erstellung einer Reihe verschachtelter Regeln unter Verwendung der Pseudoklasse :active-view-transition. Diese Styles werden immer dann angewendet, wenn eine Ansichtstransition aktiv ist, unabhängig von deren Typen. Wir setzen eine view-transition-name von none auf das :root, da wir nicht möchten, dass irgendwelche Elemente erfasst und animiert werden, außer dem <p>-Element, dem ein view-transition-name von content zugewiesen wird.

html,
body {
  height: 100%;
}

body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

div {
  display: flex;
  width: 60%;
  justify-content: space-between;
}

p {
  font-size: 1.7em;
  width: 60%;
  color: blue;
  background-color: white;
  margin-top: 0;
}

html:active-view-transition {
  :root {
    view-transition-name: none;
  }
  p {
    view-transition-name: content;
  }
}

Dann verwenden wir die Pseudoklasse :active-view-transition-type(), um zwei Blöcke verschachtelter Styles zu erstellen: Der erste wird nur angewendet, wenn die aktive Ansichtstransition einen Typ von slide hat, und der zweite wird nur angewendet, wenn die aktive Ansichtstransition einen Typ von flip hat. In jedem Block verwenden wir die ::view-transition-old() und ::view-transition-new() Pseudoelemente, um benutzerdefinierte animation-name-Werte auf die slide-Erfassungsgruppe der ausgehenden und eingehenden Ansichten anzuwenden.

Als Ergebnis:

• Wenn der Transitionstyp slide ist, gleitet die alte Inhaltsansicht nach links heraus und die neue Inhaltsansicht gleitet von rechts herein.
• Wenn der Transitionstyp flip ist, wird die alte Inhaltsansicht horizontal um 90 Grad gedreht, sodass sie nicht mehr sichtbar ist, während die neue Inhaltsansicht zurückdreht.
• In jedem anderen Fall werden die Standard-Cross-Fade-Transition-Animationen verwendet.

html:active-view-transition-type(slide) {
  &::view-transition-old(content) {
    animation-name: slide-out-to-left;
  }
  &::view-transition-new(content) {
    animation-name: slide-in-from-right;
  }
}

html:active-view-transition-type(flip) {
  &::view-transition-old(content) {
    animation-name: flip-out;
  }
  &::view-transition-new(content) {
    animation-name: flip-in;
    animation-delay: 0.6s;
  }
}

Schließlich verwenden wir @keyframes-Animationsblöcke, um die zuvor referenzierten Animationen zu definieren. Wir setzen auch eine benutzerdefinierte animation-duration auf alle Erfassungsgruppen, um die Transition-Animationen etwas zu verlangsamen.

@keyframes slide-out-to-left {
  to {
    translate: -100vw 0;
  }
}
@keyframes slide-in-from-right {
  from {
    translate: 100vw 0;
  }
}

@keyframes flip-out {
  to {
    rotate: x 90deg;
  }
}
@keyframes flip-in {
  from {
    rotate: x -90deg;
  }
}

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

Ergebnis

Das Beispiel wird so gerendert:

Versuchen Sie, jede Schaltfläche zu klicken und beachten Sie, wie sich die DOM-Änderungen in jedem Fall identisch sind, die Animation jedoch unterschiedlich ist. Das liegt daran, dass je nach gedrückter Schaltfläche ein unterschiedlicher Transitionstyp gesetzt wird (oder kein Transitionstyp im "Default"-Fall).

Angewandtes Beispiel

Sehen Sie sich unser MPA-Beispiel mit mehreren Transitionstypen an (Quellcode), das zeigt, wie unterschiedliche Animationen auf dokumentübergreifende Ansichtstransitionen je nach Navigationstyp angewendet werden können, der durch unterschiedliche Transitionstypen dargestellt wird. Der Transitionstyp wird während der Navigation mit JavaScript ermittelt.

Anwenden verschiedener dokumentübergreifender Typen mithilfe der Seitenwechsel- und Seitenauslöser-Ereignisse bietet eine Schritt-für-Schritt-Anleitung zu diesem Beispiel.

Spezifikationen

Browser-Kompatibilität

Siehe auch

• ViewTransitionTypeSet
• View Transition API
• Verwendung der View Transition API
• Verwendung von Ansichtstransitionstypen
• Glatte Transitionen mit der View Transition API