CSS View Transition: высота добавлена ​​во время перехода, которого нет ни в просмотре, ни после просмотра ⇐ CSS

[Anonymous]

Я играю с CSS View Transitions. Одним из примеров, который я видел в ряде мест, является использование его, чтобы оживить подчеркивание активной вкладки. Я подумал: «О, должно быть легко изменить это, чтобы придать активный цвет цвет фона, но переходы немного странные. < /P>
Во время перехода, кажется, есть дополнительная высота быть добавленным. Удаление высоты из стилей LI и используйте только верхний/нижний/слева/справа, но у нее такие же результаты. Происходящая вещь высоты тени? p>
Вот ссылка на кодовую и коробку кода. >
function App() {
const [activeID, setActiveID] = useState(1);

const handleClick = (ID) => {
if (!document.startViewTransition) {
setActiveID(ID);
return;
}

document.startViewTransition(() => {
flushSync(() => {
setActiveID(ID);
});
});
};

return (

• {items.map((item) => (
• key={item.ID}
  $active={activeID === item.ID}
  onClick={() => handleClick(item.ID)}
  >
  {item.value}
  
  ))}

);
}

const UL = styled.ul`
display: flex;
list-style: none;
position: relative;
`;
const LI = styled.li`
padding: 0.5rem 1rem;
position: relative;

&:before {
content: "";
display: block;
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
background-color: ${({ $active }) =>
$active ? "hsl(0 0% 100% / .1)" : "transparent"};
border: ${({ $active }) =>
$active ? "1px solid hsl(0 0% 100% / .1)" : "1px solid tranparent"};
border-radius: 0.5rem;
view-transition-name: ${({ $active }) => ($active ? "highlight" : "")};
}
`;


Подробнее здесь: https://stackoverflow.com/questions/793 ... n-either-b