[英]Animate Components On Exit With Framer Motion React
I have a button that toggles between two components.我有一个在两个组件之间切换的按钮。 How do I add an animation for each component on exit?如何在退出时为每个组件添加 animation? Here is my code that doesn't work:这是我的代码不起作用:
export default function App() {
const [dark, setDark] = useState(false);
const toggle = () => {
setDark(!dark);
};
return (
<div>
<AnimatePresence>
{dark ? (
<motion.h2 exit={{ opacity: 0 }}>Dark</motion.h2>
) : (
<motion.h2 exit={{ opacity: 0 }}>Light</motion.h2>
)}
</AnimatePresence>
<button onClick={toggle}>Toggle</button>
</div>
);
}
Thanks for your help!谢谢你的帮助!
This is fixed now.现在已修复。 In order for animation to work, you should add initial and animate props.为了使 animation 工作,您应该添加初始和动画道具。 Also each component needs to have a unique key .此外,每个组件都需要有一个唯一的key 。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.