CSS View -Übergang: Höhe hinzugefügt während des Übergangs, der vor oder nach der Ansicht nicht vorhanden ist
Posted: 01 Mar 2025, 11:39
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.
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" : "")};
}
`;