我想创建一个动画可移动侧栏.
我在CSS中定义了动画,并根据react useState值通过条件运算符添加它们. 单击蓝色div更改useState值. 这是一张Codesandbox美元的钞票
function App() {
const [visible, setVisible] = useState(false);
const show = () => {
setVisible(true);
};
const hide = () => {
setVisible(false);
};
return (
<>
<div className="container">
<div className="red-box"></div>
<div className={"blue-box " + (visible ? "expandin" : "expandout")}>
<div
onClick={visible ? hide : show}
className={"" + (visible ? "slidein" : "slideout")}
>
BLUE
</div>
</div>
</div>
</>
);
}
问题是动画只在页面加载时触发一次.随后的按钮单击会立即移动元素,而不是随着时间的推移平滑地移动它们.
我需要使它不动画在页面加载和播放正确的动画后点击(前进或后退). 我发现我不能简单地交换动画类,必须先重置它才能再次动画,但我自己想不出办法.
怎样才能做好呢?