Übergangsapi anzeigen: Registerkarte Animationskalierungsproblem ⇐ HTML

[Anonymous]

Ich experimentiere eine glatte Registerkartenschalteranimation mit der Ansichtsübergangs-API. Wenn Sie jedoch zu "Geschichtenerzählen in einem kleinen Dorf" wechseln, wird das aktive Element skaliert. Wie kann ich dieses Skalierungsverhalten verhindern und eine glatte Folie-Animation für alle Registerkarten-Breitenübergänge beibehalten? < /P>
Das Problem tritt nur auf

Code: Select all

Introduction
Storytelling in a Small Village
Technology



Lorem ipsum dolor sit amet.

In a faraway land, there was a small village.

Technology has transformed the world.



< /code>
.tabs {
position: relative;
}

.tab {
padding: 10px;
background-color: #f0f0f0;
cursor: pointer;
position: relative;
z-index: 0;
overflow: hidden;
display: inline-block;
}

.tab:hover {
background-color: #fff;
}

.tab.active {
color: #fff;
}

.tab.active::after {
view-transition-name: tab;
content: "";
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 100%;
background-color: #007bff;
z-index: -1;
}

.tab-content {
padding: 20px;
}

::view-transition-group(tab) {
animation-duration: 0.5s;
}
< /code>
const tabs = document.querySelectorAll(".tab");
const tabContents = document.querySelectorAll(".tab-content > div");
let currentTab = 0;
tabs.forEach((tab, index) => {
tab.addEventListener("click", () => {
currentTab = index;
document.startViewTransition(() => {
tabs.forEach((t, i) => {
if (i === currentTab) {
t.classList.add("active");
} else {
t.classList.remove("active");
}
});
});
tabContents.forEach((tc, i) => {
if (i === currentTab) {
tc.style.display = "block";
} else {
tc.style.display = "none";
}
});
});
});

// Set the first tab as default
document.querySelector(".tab").click();