CSS View -Übergang: Höhe hinzugefügt während des Übergangs, der vor oder nach der Ansicht nicht vorhanden ist ⇐ CSS

[Anonymous]

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 leicht sein, dies zu ändern, um der aktiven Registerkarte eine Hintergrundfarbe zu geben, aber die Übergänge sind etwas seltsam. < /P>
Während des Übergangs scheint zusätzliche Höhe hinzugefügt zu werden. Sie können im Gif sehen, was im GIF das gleiche Detail ist. Verwenden Sie nur obere/boden/links/rechts, aber es hat die gleichen Ergebnisse. /> Hier ist ein Link zu einer Codesandbox des Code.

Code: Select all

function App() {
const [activeID, setActiveID] = useState(1);

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

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

return (

[list]
{items.map((item) => (
[*]            key={item.ID}
$active={activeID === item.ID}
onClick={() => handleClick(item.ID)}
>
{item.value}

))}
[/list]

);
}

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" : "")};
}
`;