Просмотр API перехода: проблема масштабирования анимации вкладок ⇐ Javascript

[Гость]

Я экспериментирую анимацию плавного переключателя вкладок, используя API View Transition. Однако переход на «рассказывание историй в маленькой деревне» приводит к масштабированию активного элемента. Как я могу предотвратить это поведение масштабирования и сохранить плавную анимацию слайдов для всех переходов ширины вкладок?

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();


Подробнее здесь: https://stackoverflow.com/questions/794 ... ling-issue