Z-Index wird beim Übergang mit der View Transitions API ignoriert ⇐ CSS

[Guest]

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 (

Code: Select all

z-index

). 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.

Code: Select all

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',
},
];

const activeItem = ref(null);

const setActiveItem = (item) => {
if (!document.startViewTransition) {
activeItem.value = activeItem.value === item ? null : item;
return;
}

document.startViewTransition(() => {
activeItem.value = activeItem.value === item ? null : item;
});
};

return {
items,
activeItem,
setActiveItem
};
}
});

app.mount('#app');

Code: Select all

.box {
background-color: lightblue;
cursor: pointer;
position: relative;
z-index: 1;
}

.box.small {
padding: 1rem;
}

.box.big {
padding: 2rem;
font-size: 1.5rem;
margin: 2rem;
}

.grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 1rem;
padding: 1rem;
}

.overlay {
position: absolute;
inset: 0;
display: grid;
place-items: center;
z-index: 11;
}

.overlay.backdrop {
view-transition-name: overlay;
background: rgba(0, 0, 0, 0.5);
z-index: 10;
}

body {
margin: 0;
display: grid;
place-items: center;
min-width: 320px;
min-height: 100vh;
}

Code: Select all

{{ activeItem.title }}

{{ activeItem.description }}






{{ item.title }}

Hat jemand eine Idee, wie man das beheben kann?