suchen
HeimWeb-FrontendCSS-TutorialGemeinsame Elementübergänge

Gemeinsame Elementübergänge

Ich hatte nur auf bessere einheimische Pagetransitionen gehofft, und Bramus kommentierte, dass Chrome an etwas arbeitet. Es sieht so aus, als hätte es eine frische Begeisterung dafür, da es ein brandneues Repo gibt und Sie es buchstäblich in Chrome Canary testen können.

Das Repo wird hierher bewegt und ich liebe den Namen. "Shared Elements" ist hier Clutch. Es ist nicht nur wie ein Ausrutschen-, Einrutschen- oder Sternwisch, sondern kann einzelne Elemente an neue Orte verschieben. Shawn wies darauf hin, dass Sarahs Artikel diese Fähigkeit super klar macht:

Ich werde den Code -Snippet aus dem aktuellen Readme hier fallen lassen, da es wirklich cool ist:

 Funktion Handletransition () {
  document.documentTransition.prepare ({{{
    RootTransition: "Enthülle-links",
    Dauer: 300,
    SharedElements: [E1, E2, E3]
  }). Dann (() => {
    docustomthings ();
    document.documentTransition.start ({SharedElements: [Newe1, Newe2, Newe3]}). Dann (dann (
      () => console.log ("Übergang beendet"));
  });
}

Sie müssen keine SharedElements haben, aber Sie können und im Moment müssen sie alle enthalten: Farbe auf sie über CSS zur Arbeit auf sie angewendet. Beachten Sie, dass Sie sich nicht mit der Aktualisierung der URL oder irgendetwas befassen müssen. Dies würde einfach automatisch (ich denke?), Da dies keine einseitige App-Architektur erfordert, um zu arbeiten.

Seltsame Geschichte

Während ich darüber unterhielt, wies Alex Riviere auf mich darauf hin, dass vor der Chromium Edge (proprietäre) Seitenübergänge:

 <meta http- content="discureTrans (Dauer = 0,600, Übergang = 6)">

Whaaaat. Christian Schaefer hat einen Post, der das beklagt, was wir verloren haben, als wir Trident verloren haben:

Wie der Name schon sagt, würde ein solcher Filter den Benutzer von Seite zu Seite nach der Navigation reibungslos wechseln, anstatt dass Seiten so abrupt erscheinen, wie wir es gewohnt sind. Es gab eine umfangreiche Liste von Übergangsfiltern, aus denen Sie auswählen konnten, indem Sie sie über die Nummer verweisen:

Wischen, abwischen, zufällig auflösen, horizontal aufgeteilt werden usw. Keine Sterntücher, unglaublich. Und definitiv keine "gemeinsam genutzten Elementübergänge"

Das obige ist der detaillierte Inhalt vonGemeinsame Elementübergänge. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme
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
Iterieren eines React -Designs mit gestalteten KomponentenIterieren eines React -Designs mit gestalteten KomponentenApr 21, 2025 am 11:29 AM

In einer perfekten Welt hätten unsere Projekte unbegrenzte Ressourcen und Zeit. Unsere Teams würden mit gut durchdachten und hoch verfeinertem UX -Design kodieren.

Oh, die vielen Möglichkeiten, dreieckige Brotbänder zu machen!Oh, die vielen Möglichkeiten, dreieckige Brotbänder zu machen!Apr 21, 2025 am 11:26 AM

Oh, die vielen Möglichkeiten, dreieckige Brotbänder zu machen

SVG -Eigenschaften im CSS -LeitfadenSVG -Eigenschaften im CSS -LeitfadenApr 21, 2025 am 11:21 AM

SVG verfügt über eigene Elemente, Attribute und Eigenschaften, sofern der Inline -SVG -Code lang und komplex werden kann. Durch die Nutzung von CSS und einigen der bevorstehenden Merkmale der SVG 2 -Spezifikation können wir diesen Code für saubereres Markup reduzieren.

Ein paar funktionale Verwendungen für den Intersection -Beobachter, um zu wissen, wann ein Element in Sicht istEin paar funktionale Verwendungen für den Intersection -Beobachter, um zu wissen, wann ein Element in Sicht istApr 21, 2025 am 11:19 AM

Sie wissen das vielleicht nicht, aber JavaScript hat sich in jüngster Zeit heimlich eine ganze Reihe von Beobachtern angesammelt, und der Beobachter der Kreuzung ist ein Teil davon

Wiederbelebung bevorzugt es, reduzierte Motion zu machenWiederbelebung bevorzugt es, reduzierte Motion zu machenApr 21, 2025 am 11:18 AM

Möglicherweise müssen wir nicht alle CSS -Animationen wegwerfen. Denken Sie daran, es ist eine bevorzugte Motion, nicht bevorzugt nicht mit Bewegung.

So holen Sie eine progressive Web -App in den Google Play StoreSo holen Sie eine progressive Web -App in den Google Play StoreApr 21, 2025 am 11:10 AM

PWA (Progressive Web Apps) ist seit einiger Zeit bei uns. Jedes Mal, wenn ich den Kunden versuche, es zu erklären, wird dieselbe Frage angezeigt: "Werden meine Benutzer sein

Die einfachsten Möglichkeiten, mit HTML umzugehenDie einfachsten Möglichkeiten, mit HTML umzugehenApr 21, 2025 am 11:09 AM

Es ist für mich äußerst überraschend, dass HTML noch nie andere HTML -Dateien in sich einbezogen hat. Es scheint auch nicht etwas am Horizont zu stehen, das

Ändern Sie die Farbe von SVG beim SchwebeÄndern Sie die Farbe von SVG beim SchwebeApr 21, 2025 am 11:04 AM

Es gibt viele verschiedene Möglichkeiten, SVG zu verwenden. Abhängig davon, in welchem ​​Weg die Taktik zum Umfotieren dieser SVG in verschiedenen Zuständen oder Bedingungen -: schweben,

See all articles

Heiße KI -Werkzeuge

Undresser.AI Undress

Undresser.AI Undress

KI-gestützte App zum Erstellen realistischer Aktfotos

AI Clothes Remover

AI Clothes Remover

Online-KI-Tool zum Entfernen von Kleidung aus Fotos.

Undress AI Tool

Undress AI Tool

Ausziehbilder kostenlos

Clothoff.io

Clothoff.io

KI-Kleiderentferner

Video Face Swap

Video Face Swap

Tauschen Sie Gesichter in jedem Video mühelos mit unserem völlig kostenlosen KI-Gesichtstausch-Tool aus!

Heiße Werkzeuge

MantisBT

MantisBT

Mantis ist ein einfach zu implementierendes webbasiertes Tool zur Fehlerverfolgung, das die Fehlerverfolgung von Produkten unterstützen soll. Es erfordert PHP, MySQL und einen Webserver. Schauen Sie sich unsere Demo- und Hosting-Services an.

Dreamweaver Mac

Dreamweaver Mac

Visuelle Webentwicklungstools

SublimeText3 Mac-Version

SublimeText3 Mac-Version

Codebearbeitungssoftware auf Gottesniveau (SublimeText3)

PHPStorm Mac-Version

PHPStorm Mac-Version

Das neueste (2018.2.1) professionelle, integrierte PHP-Entwicklungstool

WebStorm-Mac-Version

WebStorm-Mac-Version

Nützliche JavaScript-Entwicklungstools