Heim > Web-Frontend > CSS-Tutorial > Übergänge außerhalb des Ansichtsfensters anzeigen

Übergänge außerhalb des Ansichtsfensters anzeigen

DDD
Freigeben: 2024-11-19 07:28:02
Original
596 Leute haben es durchsucht

View Transitions outside the Viewport

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);
    }
}
Nach dem Login kopieren
Nach dem Login kopieren
<!-- on page1.html: -->
<div data-view-transition>Whoosh!</div>

<!-- on page2.html: -->
<div data-view-transition>Whoosh!</div>
Nach dem Login kopieren

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);
}
Nach dem Login kopieren

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);
    }
}
Nach dem Login kopieren
Nach dem Login kopieren

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>


          

            
        
Nach dem Login kopieren

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!

Quelle:dev.to
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage