Übergänge außerhalb des Ansichtsfensters anzeigen

CSS-Ansichtsübergänge sind in Chrome gelandet und stehen nun (im Guten wie im Schlechten) den meisten Endbenutzern allgemein zur Verfügung. Safari ist nicht weit dahinter, die Funktion ist in TP verfügbar und Firefox arbeitet zumindest daran.

Ich finde es toll, wie viel einfacher die Implementierung von mehrseitigen Übergängen geworden ist, aber gleichzeitig habe ich ein großes Problem mit ihnen festgestellt: Elemente, die sich außerhalb des Ansichtsfensters befinden, beginnen wild herumzuschwirren.

Mein Blog befasst sich mit etwas Javascript. Ein IntersectionObserver legt den view-transition-name in einer benutzerdefinierten Eigenschaft fest, während er sichtbar ist. Solange es außer Sichtweite ist, ist die Eigenschaft deaktiviert und der Übergang wird nicht ausgelöst. Es funktioniert, aber HTML, Javascript und CSS müssen voneinander abhängig sein. Im Sinne einer CSS-Anpassung der Präsentationsaspekte würde ich mir eine einfachere Lösung wünschen.

Eine weitere Funktion, die möglicherweise hilfreich sein könnte, ist kürzlich in Chrome gelandet: Scroll-gesteuerte Animationen. Leider ist dies bisher nur in Chrome verfügbar. Firefox hat es hinter einer Flagge und Safari zeigt hier keine Anzeichen von Aktivität. Wir können jedoch problemlos auf die zuvor erwähnte Javascript-Lösung zurückgreifen oder die Ansichtsfenstererkennung einfach ignorieren und die Animation trotzdem anzeigen (dies wäre zum Zeitpunkt des Schreibens in Safari der Fall).

Ein einfacher Übergang

Lassen Sie uns alles zusammenfassen, beginnend mit dem Ansichtsübergang selbst:

@media (prefers-reduced-motion: no-preference) {
    @view-transition {
        navigation: auto;
    }

    [data-view-transition] {
        view-transition-name: var(--view-transition-name, default-view-transition);
    }
}

<!-- on page1.html: -->
<div data-view-transition>Whoosh!</div>

<!-- on page2.html: -->
<div data-view-transition>Whoosh!</div>

Jetzt sehen Sie, wie sich das Div von Seite1.html beim Navigieren in seine Version auf Seite2.html verwandelt. Die @view-transition at-Regel in CSS initiiert ebenfalls eine Überblendung im gesamten Dokument. Die Übergangsdauer ist standardmäßig auf 0,4 Sekunden eingestellt, aber wir können ein paar Zeilen hinzufügen, um dies zu steuern:

@property --view-transition-duration {
    syntax: "<time>";
    inherits: true;
    initial-value: 0.4s;
}

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

Die Dauer wird durch --view-transition-duration festgelegt. Die @property-Regel oben ist völlig optional, lässt die Animationsdauer jedoch auf 0,4 Sekunden zurückfallen, statt auf einen ungültigen Wert, wenn wir --view- festlegen. Übergangsdauer: falsch.

Umgang mit dem Ansichtsfenster

Wenn sich ein Element zum Zeitpunkt eines Seitenübergangs jedoch außerhalb des Ansichtsfensters befindet, wird es dennoch animiert und manchmal in oder über den gesamten sichtbaren Bildschirm verschoben, ohne anzugeben, woher es kommt oder wohin es geht. Ich finde dieses Verhalten sehr irritierend.

Mit scrollgesteuerten Animationen verfügen wir jetzt über ein Tool, das Stile basierend auf einem Scroll und einer relativen Position zum Ansichtsfenster steuern kann. So können wir auch den Auslöser für Ansichtsübergänge steuern:

@media (prefers-reduced-motion: no-preference) {
    @view-transition {
        navigation: auto;
    }

    [data-view-transition] {
        view-transition-name: var(--view-transition-name, default-view-transition);
    }
}

Die Keyframe-Animation „enable-vt“ kann nicht reibungslos von „Keine“ zu einer benutzerdefinierten Eigenschaft mit einer Textzeichenfolge übergehen, sodass ein harter Schnitt erforderlich ist. Der Animationsbereich wird ausgelöst, wenn das Element das Ansichtsfenster auch nur teilweise betritt oder verlässt. Die Animation selbst setzt --enable-view-transition auf 0,1 % und 99,9 %, um so schnell wie möglich ausgelöst zu werden. Ich möchte Ansichtsübergänge aktivieren, sobald wir einen Hinweis darauf erhalten, wo die Animation begonnen oder geendet hat.

Schließlich wird --enable-view-transitions durch die scrollgesteuerte Animation entweder auf „none“ oder eine neue benutzerdefinierte Eigenschaft namens „--view-transition-name“ gesetzt. Der Wert liegt zwischen 0,1 % und 99,9 % der Bildschirmabdeckung und deaktiviert Ansichtsübergänge sowohl oberhalb als auch unterhalb des Ansichtsfensters (oder links und rechts, je nachdem, wie Sie es halten möchten). Diese neue Eigenschaft ist nützlich, um individuelle Animationen für verschiedene Elemente festzulegen. Jedes Element kann seinen eigenen Übergang erhalten, indem ein eindeutiger Wert für --view-transition-name.
festgelegt wird

<div data-view-transition>



<p>Dies muss sowohl auf der Quell- als auch auf der Zielseite erfolgen. Wenn kein Wert festgelegt ist, wird standardmäßig der Standardansichtsübergang verwendet, der alle verbleibenden Datenansichtsübergangselemente einheitlich steuert.</p>

<h2>
  
  
  Reale Umsetzung
</h2>

<p>Ich habe diese Implementierung zu meinem kleinen CSS-Boilerplate, Ssstyles, hinzugefügt. Wenn Sie einem Element auf der Quell- und Zielseite das Attribut „data-view-transition“ zuweisen, kann es zwischen beiden Seiten wechseln. Wenn Sie ihm den Namen „--view-transition-name“ geben, verfügt er über eine eigene, einzigartige Animation, unabhängig von anderen ähnlichen Elementen. Durch Festlegen von --view-transition-duration wird die Dauer des Übergangs gesteuert.</p>


          

            
        

Das obige ist der detaillierte Inhalt vonÜbergänge außerhalb des Ansichtsfensters anzeigen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!