www說
2023-03-24 17:06:32
我有這個簡單的插入符號可以旋轉,但它似乎沒有從中心旋轉,我應該調整什么?const Wrap = styled.div` width: 100px; background: grey; span { display: block; transform: ${(props) => (props.isOpen ? "rotate(0deg)" : "rotate(180deg)")}; transition: all ease-in 0.2s; }`;export default function App() { const [open, setIsOpen] = React.useState(false); return ( <Wrap isOpen={open} className="App" onClick={() => setIsOpen(!open)}> {open.toString()} <span>^</span> </Wrap> );}https://codesandbox.io/s/angry-jackson-8rdcl?file=/src/App.js:90-541
2 回答

慕森王
TA貢獻1777條經驗 獲得超3個贊
這是因為你的元素的尺寸??磳Ρ冉貓D:
相對
只需使用其他資產。
例子:
span {
display: block;
transform: ${(props) => (props.isOpen ? "rotate(90deg)" : "rotate(270deg)")};
transition: all ease-in 0.2s;
}
<span>{">"}</span>

叮當貓咪
TA貢獻1776條經驗 獲得超12個贊
實際上是span從中心旋轉。但是您的插入符字形不在跨度的垂直中心,因為它在底部有很大的邊距:^。在跨度上設置固定高度以強制插入符號向下?;蛘呤褂酶线m的字形。
const Wrap = styled.div`
width: 100px;
background: grey;
span {
display: block;
transform: ${(props) => (props.isOpen ? "rotate(0deg)" : "rotate(180deg)")};
transition: all ease-in 0.2s;
height: 13px;
}
`;
添加回答
舉報
0/150
提交
取消