Was um alles in der Welt ist der Deskriptor 'Typen' im Sichtwechsel?

Haben Sie jemals etwas Neues recherchiert, nur um spärliche Informationen zu finden? Das ist das frustrierende, aber aufregende Paradox, das unbekannte digitale Gebiet zu erkunden. Ich habe dies kürzlich begegnet, als ich das @view-transition AT-RULE und seinen types Deskriptor dokumentiert habe.

Sie sind wahrscheinlich mit Übergängen der Cross-Dokumentansicht vertraut: CSS-betriebene Übergänge zwischen Webseiten, die zuvor JavaScript-Frameworks und Animationsbibliotheken erfordern. Durch die Einleitung eines Übergangs beinhaltet das Einstellen des navigation -Deskriptors auf beiden Seiten auf auto, wodurch ein reibungsloser Kreuzungseffekt erzeugt wird.

@view-transition {
  navigation: auto;
}

Einfach, richtig? navigation ist der häufig bekannte Deskriptor. Aber es gibt noch ein anderes, weniger dokumentiertes Geschwister: den types Deskriptor.

Verständnis des types Deskriptors

Übergänge der Cross-Dokumentansicht sind relativ neu, sodass eine umfassende Erkundung dauert. Überraschenderweise wird der types Deskriptor oft übersehen; Einige Dokumentation lässt dies vollständig aus. Die CSS -Spezifikation liefert diese Klärung:

Der types Deskriptor legt die aktiven Typen für den Übergang fest, wenn der Übergang erfasst oder durchgeführt wird.

Insbesondere

akzeptiert types eine von Space getrennte Liste aktiver Typnamen (als <custom-ident></custom-ident>) oder none Wenn keine aktiven Typen angewendet werden.

• Name: types
• für: @view-transition
• Wert: none | <custom-ident> </custom-ident>
• Anfang: none

Beispiel Verwendungen:

@view-transition {
  navigation: auto;
  types: bounce;
}

/* Or a list */
@view-transition {
  navigation: auto;
  types: bounce fade rotate;
}

Aber was sind "aktive" Typen? Lassen Sie uns tiefer tauchen.

aktive Typen: Anpassung von Übergängen

Die Herausforderung: Eine universelle Kreuzanimation ist nützlich, aber oft benötigen wir eine Übergangsanpassung auf der Grundlage des Navigationskontexts. Beispielsweise kann ein paginierter Inhalt nach rechts/nach links rutschen, während ein Social -Media -Profil -Klick das Profilbild während des Übergangs bestehen kann. Das Definieren mehrerer Übergänge führt direkt zu Konflikten. Wir brauchen eine selektive Übergangsaktivierung.

Die Lösung: aktive Typen bestimmen, welcher Übergang und welche Elemente beteiligt sind. In CSS zielt die :active-view-transition-type() Pseudoklasse Elemente mit einem bestimmten aktiven Typ ab. Wenn wir bounce als aktiven Typ definieren, wird die bounce -Animation nur dann aktiviert, wenn die :active-view-transition-type(bounce) -Konstallation erfüllt ist.

@view-transition {
  navigation: auto;
}

Dies verhindert widersprüchliche Übergänge. Wichtig ist, dass dies nur die Übergänge zu auf der Seite beeinflusst, nicht über die Übergänge von ihm entfernt und angepasste Übergänge basierend auf der Zielseite aktiviert.

Eine Demo -Präsentation bounce und slide Übergänge, die über den types -Deskriptor kontrolliert wird, ist hier verfügbar . Der vollständige Code befindet sich auf GitHub [Link-to-Github].

JavaScripts erweiterte Rolle

CSS allein begrenzt die Kontrolle auf Übergänge basierend auf der Zielseite. Komplexere Szenarien wie unsere Pagination und unsere Beispiele für soziale Medien erfordern die Kenntnis der Quellseite. Aktive Typen können auf drei Arten besiedelt werden:

1. über startViewTransition(callbackOptions) Argumente.
2. dynamisch mit der Eigenschaft des Übergangs types mutiert.
3. mit dem types Deskriptor deklariert (wie oben diskutiert).

Option 2, die mit dem Ereignis pagereveal mit dem aktiven Typ der aktiven Typen verwendet wird, ermöglicht die Einstellung von On-Demanden, wodurch kontextbezogene Übergänge basierend auf Quellen- und Zielseiten basierend werden. Eine weitere Untersuchung dieser Methode ist gerechtfertigt.

Für tiefere Tauchgänge in aktive Typen und Übergänge sehen Sie:

• Übergangstypen anzeigen in Querdokumentansichtübergängen (Bramus)
• Passen Sie die Richtung eines Ansichtsübergangs mit JavaScript (Umar Hansa) an
an

Das obige ist der detaillierte Inhalt vonWas um alles in der Welt ist der Deskriptor 'Typen' im Sichtwechsel?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!