Dieser Inhalt wurde automatisch aus dem Englischen übersetzt, und kann Fehler enthalten.Erfahre mehr über dieses Experiment.
view-timeline-axis
Limited availability
This feature is not Baseline because it does not work in some of the most widely-used browsers.
Dieview-timeline-axisCSS Eigenschaft legt die Scrollrichtung für einebenannte Ansicht-Fortschritts-Timeline fest.
Syntax
/* Logical property values */view-timeline-axis: block;view-timeline-axis: inline;/* Physical property values */view-timeline-axis: y;view-timeline-axis: x;/* Global values */view-timeline-axis: inherit;view-timeline-axis: initial;view-timeline-axis: revert;view-timeline-axis: revert-layer;view-timeline-axis: unset;Werte
Beschreibung
Die Eigenschaftview-timeline-axis legt die Richtung oder<axis> vonbenannten Ansicht-Fortschritts-Timelines fest, die auf dem Box-Modell des Elements basieren.
Standardmäßig Fortschritte CSS@keyframes Animationen entlang der zeitbasierten Standard-Timeline. Wenn Sie den Animationsfortschritt stattdessen über eine Ansicht-Fortschritts-Timeline setzen, gibtview-timeline-axis die Richtung an, die die Timeline-Fortschreitung steuert.
Für Ansicht-Fortschritts-Timelines basiert die Fortschreitung der Animation entlang der Timelines auf der Sichtbarkeit des Elements oderSubjekts. Die Eigenschaftview-timeline-axis wird auf das Subjekt eingestellt.
Das Subjekt muss innerhalb eines scrollbaren Elements verschachtelt sein. Wenn das scrollbare Element nicht über seinen Container in der Achsenrichtung überfließt oder wenn der Überlauf verborgen oder abgeschnitten ist, wird keine Scroll-Fortschrittstimeline erstellt.
Dieview-timeline-axis ist zusammen mit den Eigenschaftenview-timeline-inset undview-timeline-name ein Bestandteil der Kurzform-Eigenschaftview-timeline.
Formale Definition
| Anfangswert | block |
|---|---|
| Anwendbar auf | alle Elemente |
| Vererbt | Nein |
| Berechneter Wert | wie angegeben |
| Animationstyp | Not animatable |
Formale Syntax
view-timeline-axis =
[block|inline|x|y]#
Beispiele
Definieren der Achse der Ansicht-Fortschritts-Timeline
In diesem Beispiel wird eine Ansicht-Fortschritts-Timeline namens--subject-reveal mittels der Eigenschaftview-timeline-name auf einem Subjektelement mit der Klasse "animation" definiert. Diese Timeline wird dann auf die Animation auf demselben Element angewendet, indemanimation-timeline: --subject-reveal; verwendet wird.
Um die Wirkung vonview-timeline-axis zu demonstrieren, wird in diesem Beispiel eine horizontale (nicht standardmäßige) Scrollleiste verwendet, um die Animation zu steuern.
HTML
Das HTML für das Beispiel wird unten gezeigt.
<div> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p> <p> Risus quis varius quam quisque id. Et ligula ullamcorper malesuada proin libero nunc consequat interdum varius. Elit ullamcorper dignissim cras tincidunt lobortis feugiat vivamus at augue. </p> <p> Dolor sed viverra ipsum nunc aliquet. Sed sed risus pretium quam vulputate dignissim. Tortor aliquam nulla facilisi cras. </p> <p> A erat nam at lectus urna duis convallis convallis. Nibh ipsum consequat nisl vel pretium lectus. </p> <p> Sagittis aliquam malesuada bibendum arcu vitae elementum. Malesuada bibendum arcu vitae elementum curabitur vitae nunc sed velit. </p> <div></div> <p> Adipiscing enim eu turpis egestas pretium aenean pharetra magna ac. Arcu cursus vitae congue mauris rhoncus aenean vel. Sit amet cursus sit amet dictum. Augue neque gravida in fermentum et. Gravida rutrum quisque non tellus orci ac auctor augue mauris. </p></div>CSS
Im CSS setzen wir dassubject Element als Quelle einer Ansicht-Fortschritts-Timeline namens--subject-reveal mittels der Eigenschaftview-timeline-name.Die Scrollachse wird mitview-timeline-axis: x; gesetzt. Wir fügen auchview-timeline-axis: horizontal; für Browser hinzu, die die nicht standardmäßigen, veralteten Wertehorizontal undvertical, anstelle vonx undy, unterstützen.
Das Vorfahrelementcontent wird so gestaltet, dass es horizontal überläuft, indem seine Inhalte mitdisplay: flex; undflex-flow: column wrap; angeordnet werden.
.subject { width: 300px; height: 200px; margin: 0 auto; background-color: deeppink;}.content { width: 50%; height: 400px; margin-top: 30px; display: flex; flex-flow: column wrap; gap: 10px;}p { font-family: "Helvetica", "Arial", sans-serif;}p { font-size: 1.3rem; line-height: 1.4;}.animation { view-timeline-name: --subject-reveal; view-timeline-axis: x; view-timeline-axis: horizontal; animation: appear 1ms linear both; animation-timeline: --subject-reveal;}@keyframes appear { from { opacity: 0; transform: scaleX(0); } to { opacity: 1; transform: scaleX(1); }}@layer no-support { body::before { display: block; text-align: center; padding: 1em; } @supports not (view-timeline-axis: inherit) { body::before { content: "Your browser doesn't support the `view-timeline-axis` property."; background-color: wheat; } } @supports (view-timeline-axis: horizontal) { body::before { content: "Your browser supports legacy values for the `view-timeline-axis` property."; background-color: yellow; } }}Ergebnis
Scrollen Sie die horizontale Leiste am unteren Rand, um das Subjektelement zu animieren, während Sie scrollen.
Spezifikationen
| Specification |
|---|
| Scroll-driven Animations # view-timeline-axis |