View-timeline-name | CSS-Tricks

CSS-Almanach → Eigenschaften → V → view-timeline-name

Geoff Graham am 30. Mai 2024

Die CSS-Eigenschaft view-timeline-name ermöglicht es uns, ein Element zu identifizieren und zu referenzieren, das wir basierend auf seiner Scrollposition animieren möchten, wenn es in den sichtbaren Bereich (d. h. den Scrollport) eines Scroll-Containers (auch „Quelle“ genannt) eintritt.

.element {
  view-timeline-name: --image-zoom;
}

Es ist eine deklarative Methode, um eine Scroll-Animation auszulösen; andernfalls beginnt die Scroll-basierte Animation des Elements (auch „Subjekt“ genannt), wenn es in den Scrollport seines nächstgelegenen Vorfahren eintritt, der einen hat.

Die Eigenschaft view-timeline-name kann auch über die Eigenschaft view-timeline deklariert werden, bei der es sich um eine Kurzschreibweise handelt, die view-timeline-name und view-timeline-axis in einer einzigen Deklaration kombiniert.

.element {
  view-timeline: --image-zoom y;

  /* Equivalent to: */
  view-timeline-name: --image-zoom;
  view-timeline-axis: y;
}

Syntax

view-timeline-name: [ none | <dashed-ident> ]#

Initialwert: none
Anwendbar auf: Alle Elemente
Vererbt: Nein
Prozentangaben: N/A
Berechneter Wert: none oder eine Liste von CSS-Identifikatoren
Kanonische Reihenfolge: Nach Grammatik
Animation: Nicht animierbar

Eigenschaftswerte & Beschreibungen

/* Keyword value: none */
view-timeline-name: none;

/* <dashed-ident> examples */
view-timeline-name: --my-timeline;
view-timeline-name: --myTimeline;
view-timeline-name: --my_timeline;

none: Die Zeitleiste hat keinen Namen.
<dashed-ident>: Ein benutzerdefinierter Name für eine Ansichtsfortschrittszeitleiste, ähnlich einem <custom-ident>, der sie deklarativ identifiziert und von anderen Zeitleisten unterscheidet. Der Wert wird als „gestricheltes“ Ident bezeichnet, da er mit zwei Strichen (--) vorangestellt werden muss, genau wie bei CSS-Benutzerdefinierten Eigenschaften, z. B. --image-zoom.

Scroll-Fortschrittszeitleisten vs. Ansichtsfortschrittszeitleisten

Der Unterschied mag gering erscheinen, aber eine Scroll-Fortschrittszeitleiste ist eine Animation, die wir für ein Element ausführen möchten, das *im aktuellen Scrollport sichtbar* ist, d. h. dessen Scroll-Position, egal ob vertikal (die y-Achse) oder horizontal (die x-Achse) gescrollt wird. Wenn das Element eine Scroll-Position erreicht, wird die Animation ausgelöst und am Ende des Scroll-Containers abgeschlossen. Mit anderen Worten, es ist eine Animationszeitleiste, die sich von 0 % auf 100 % fortschreitet, während der Benutzer scrollt, während eine typische Animationszeitleiste oft dann stattfindet, wenn die Seite gerendert wurde.

Das unterscheidet sich von einer Ansichtsfortschrittszeitleiste, die ein Segment oder Teil einer Scroll-Fortschrittszeitleiste ist. Mit anderen Worten, eine Ansichtsfortschrittszeitleiste ist so etwas wie die Startzündung einer Scroll-Fortschrittszeitleiste, die die Scroll-Fortschrittszeitleiste auslöst, sobald das Element (d. h. das „Subjekt“) gerade sichtbar ist.

Illustrating the pieces of an animation timeline, scroll progress timeline, and view progress timeline.

Wir sprechen also von einer Scroll-Fortschrittszeitleiste, die auf die Sichtbarkeit des Elements im aktuellen Ansichtsbereich beschränkt ist. Sobald die Startkante des Elements mit der Scrollkante seines nächstgelegenen Vorfahren (was eine schicke Art ist zu sagen „der sichtbare Teil eines Scroll-Containers“) überlappt, wird die Animation an die Scroll-Fortschrittszeitleiste übergeben und schreitet durch das Scrollen des Benutzers entlang der eingestellten Achse – x oder y – fort.

Illustration of a scroll container on a webpage, including the visible scroll port and the element waiting to animate on scroll when entering the scroll port.

Das <body>-Element kann als Scroll-Container betrachtet werden, solange es das aktuell sichtbare überläuft. Das bedeutet, wir können eine Animation auslösen oder starten, wenn das zu animierende Element in den sichtbaren Bereich des <body> gelangt, wonach die Animation basierend auf der Scroll-Position des Elements fortschreitet.

Ein wenig Terminologie

Es ist erwähnenswert, dass es einige spezifische Begriffe gibt, die die Spezifikation verwendet, um die verschiedenen Teile einer Scroll-Fortschrittszeitleiste zu beschreiben.

Subjekt: Das Element, das wir animieren möchten.
Quelle: Der nächstgelegene Vorfahr des Subjekts (wie ein Eltern- oder Großelternteil) mit einem Scroll-Container, der die Animation auslöst und enthält, bis die Startkante des Subjekts mit der Endkante der Quelle überlappt.

Es ist gut, dass wir diese Art von Kontext haben, daher werden wir diese Begriffe weiterhin verwenden.

Es ist eine deklarative Methode zur Definition einer Ansichtsfortschrittszeitleiste

Wir *müssen* einer Ansichtsfortschrittszeitleiste keinen Namen geben. Wenn wir es nicht tun, wird sie als *anonyme* Zeitleiste bezeichnet und das Subjekt, das wir animieren möchten, tritt in die Fortschrittszeitleiste ein, wenn es seine *nächstgelegene* Quelle überlappt. Mit anderen Worten, die Animation wird ausgelöst, wenn das Element in den sichtbaren Teil des ersten Scroll-Containers gelangt, auf den es stößt.

Umgekehrt können wir der Ansichtsfortschrittszeitleiste explizit einen identifizierenden Namen mit der Eigenschaft view-timeline-name geben, um eine *deklarative* Zeitleiste zu erstellen, die namentlich aufgerufen und referenziert werden kann. Dies ist das, was wir verwenden, wenn wir möchten, dass die Animation des Subjekts ausgelöst wird, wenn es in den sichtbaren Bereich einer ganz bestimmten Quelle eintritt.

Anonyme Ansichtsfortschrittszeitleisten mit `view()`

Auch wenn wir uns entscheiden, einer Ansichtsfortschrittszeitleiste keinen expliziten Namen mit scroll-timeline-name zu geben, ist es immer noch möglich, das Verhalten der Ansichtszeitleiste mit der Funktion view() zu konfigurieren. Die Funktion nimmt keinen scroll-timeline-name-Parameter entgegen, weist den Browser jedoch an, was ein Subjekt tun soll, wenn es mit seiner Quelle überlappt.

.subject {
  animation-timeline: view(y 10dvh);
}

Selbst ohne einen expliziten view-transition-name, der auf dem Subjekt-Element gesetzt ist, können wir immer noch steuern, auf welcher view-timeline-axis die Animation ausgeführt wird und genau festlegen, wann sie mit einem view-timeline-inset-Parameter startet.

Spezifikation

Die Eigenschaft view-timeline-name ist im Scroll-driven Animations Module Level 1 Specification definiert, das zum Zeitpunkt des Schreibens den Status eines Editor’s Draft hat. Das bedeutet, dass die Arbeit diskutiert wird und sich zwischen jetzt und dem Zeitpunkt, an dem der Vorschlag eine formelle Candidate Recommendation wird, ändern kann.