Hinweis: Das folgende Beispiel verwendet die View Transitions API, die noch nicht in allen Browsern unterstützt wird. In Firefox führt dieser Code die Übergänge nicht durch und zeigt daher nicht das Problem an, das ich habe. Was ich zu machen versuche
Mit der View Transitions API wechsle ich zwischen zwei Elementen. Dies geschieht, wenn der Benutzer auf ein Element klickt. Dadurch wird eine Art Modal über einer Liste von Elementen mit einem schönen Übergang geöffnet.
Das Problem, mit dem ich konfrontiert bin< /strong>
Die API scheint die Stapelreihenfolge nicht sehr gut zu respektieren (
). Das größte Problem besteht darin, dass .overlay.backdrop über das Element geht, das sich in einem Übergang befindet. Erst wenn der Übergang abgeschlossen ist, können Sie sehen, wie das Element „aufleuchtet“ und zum Hintergrund übergeht. Ich finde auch nicht heraus, wie ich das ausgewählte Element während des Übergangs über die anderen Elemente verschieben kann.
Tipp: Sie können wirklich deutlich sehen, was passiert, wenn Sie die Animationsgeschwindigkeit auf 10 % einstellen. in den Chrome Devtools.
Was ich ausprobiert[/b]
Verschiedene Möglichkeiten, die Struktur des DOM und des Z-Index von Elementen zu ändern.
Ich habe mit dem Pseudoelement ::view-transition-group (Docs-Link) in meinem CSS herumgespielt, aber da ich die Namen meiner Elemente dynamisch festlege, glaube ich nicht, dass ich das kann Verwenden Sie das?
Ich habe wirklich keine Ahnung, wie um dies weiter zu debuggen.
[b]Hinweis: Das folgende Beispiel verwendet die View Transitions API, die noch nicht in allen Browsern unterstützt wird. In Firefox führt dieser Code die Übergänge nicht durch und zeigt daher nicht das Problem an, das ich habe.[/b] [b]Was ich zu machen versuche
Mit der View Transitions API wechsle ich zwischen zwei Elementen. Dies geschieht, wenn der Benutzer auf ein Element klickt. Dadurch wird eine Art Modal über einer Liste von Elementen mit einem schönen Übergang geöffnet. Das Problem, mit dem ich konfrontiert bin< /strong>
Die API scheint die Stapelreihenfolge nicht sehr gut zu respektieren ([code]z-index[/code]). Das größte Problem besteht darin, dass .overlay.backdrop über das Element geht, das sich in einem Übergang befindet. Erst wenn der Übergang abgeschlossen ist, können Sie sehen, wie das Element „aufleuchtet“ und zum Hintergrund übergeht. Ich finde auch nicht heraus, wie ich das ausgewählte Element während des Übergangs über die anderen Elemente verschieben kann. Tipp: Sie können wirklich deutlich sehen, was passiert, wenn Sie die Animationsgeschwindigkeit auf 10 % einstellen. in den Chrome Devtools. [img]https://i.sstatic.net/7AnOmiue.png[/img] Was ich ausprobiert[/b] [list] [*]Verschiedene Möglichkeiten, die Struktur des DOM und des Z-Index von Elementen zu ändern. [*]Ich habe mit dem Pseudoelement ::view-transition-group (Docs-Link) in meinem CSS herumgespielt, aber da ich die Namen meiner Elemente dynamisch festlege, glaube ich nicht, dass ich das kann Verwenden Sie das? [/list] Ich habe wirklich keine Ahnung, wie um dies weiter zu debuggen.
[code]const { ref } = Vue;
const app = Vue.createApp({ setup() { const items = [ { id: 1, title: 'Diablo 4', description: 'A shit game with a decent story', }, { id: 2, title: 'Elden Ring', description: 'A good game with a shit story', }, { id: 3, title: 'The Witcher 3', description: 'A good game with a good story', }, { id: 4, title: 'Cyberpunk 2077', description: 'A shit game with a shit story', }, ];
Ich spiele mit CSS View -Übergängen. Ein Beispiel, das ich an einer Reihe von Orten gesehen habe, besteht darin, die Unterstreichung der aktiven Registerkarte zu verwenden. Ich dachte: Oh, es sollte...
Ich habe eine einfache Pyflink -Anwendung, in der ich einen Primärschlüssel für die temporale Tabellenverbindung benötige. Da meine Quelle Avro Confluent -Format verwendet und Probleme mit...
Ich habe eine MySQL-Tabelle mit einem einspaltigen Index in der C1-Spalte. Ich muss es durch einen zusammengesetzten Index auf (C1, C2) ersetzen und dann den ursprünglichen Einspalt-Index fallen...
Ich bin neu in Python und habe einige Probleme über die Übernahme von einem Spefcific -Index zu anderen. Ex: Ich fordere eine Eingabe des Namens von jedem Elternteil des Benutzers an und möchte nur...
Ich arbeite derzeit an einem minimalen API-Projekt. Für Gestaltungszwecke muss die API über eine Funktion zum Senden von E-Mails unter Verwendung der Razor View-Vorlage im Textkörper verfügen. Ich...