每當我使用 vanilla CSS（在樣式化組件中）渲染 React 組件時，我都試圖找出一種添加過渡的方法。我知道有一個叫做 React Transition Group 的依賴，但我希望盡可能避免更多的依賴。
我想向我的移動側選單添加一個垂直顯示過渡，當單擊漢堡圖示時向下擴展。
這是迄今為止我所擁有的示例：選單圖片
uj5u.com熱心網友回復：
您可以根據狀態值在 style 屬性中設定選單的高度，并為您的樣式組件添加過渡時間。
const Menu = styled.div`
position: absolute;
bottom: 0px;
left: 0px;
z-index: 1;
transition: 300ms;
overflow: hidden;
height: 100px;
`
function NavBar(_props) {
const [showMenu, setShowMenu] = useState(false)
return (
<div>
<button onClick={() => setShowMenu(!showMenu)}>
<img src={MenuIcon} />
<Menu style={{ height: showMenu ? 100 : 0 }}>
{/* You can add your menu items here */}
</Menu>
</button>
</div>
);
}轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/396418.html
標籤：javascript css 反应 css-transitions 样式组件
上一篇：React回應式設計重新排序組件