React问题的Framer运动页面转换

Question

我正在编写一个简单的应用程序，我想使用framer运动库添加页面转换。我面临的问题是，我看到的每个教程和文档都使用<motion.div>标记在每个组件中，我觉得这有点烦人。

这是我的App.js 的返回

return (
<Router>
<div className="App">
<Switch>
<Route exact path="/">
<HomeScreen />
</Route>
<Route exact path="/contact">
<ContactScreen />
</Route>
<Route exact path="/aboutus">
<AboutUsScreen />
</Route>
</Switch>
</div>
</Router >

)；

如果我想添加动画，我必须添加<motion.div>在每个组件内部。我想做的(但无法使其发挥作用(是这样的：

<Route exact path="/">
<motion.div initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
exit={{ opacity: 0 }}
>
<HomeScreen />
</motion.div>
</Route>

从上个星期起我就一直被困在这个问题上。如果有人能帮我一把，我会非常感激的！

Answer 1

所以，如果我理解正确，那么你可以做这样的事情：

第一步：创建一个自定义组件，如下面的组件

import React from "react";
import { motion } from "framer-motion";
interface IProps {
initial: {};
animate: {};
children: any;
transition: {};
component: string;
className: string;
exit?: {}; // can be undefined
}
const AnimatedFramerMotionComponent = ({
exit,
initial,
animate,
children,
component,
className,
transition,
}: IProps) => {
const CustomComponent: any = motion(component);
return (
<CustomComponent
initial={initial}
animate={animate}
exit={exit}
transition={transition}
className={className}
>
{children}
</CustomComponent>
);
};
export default AnimatedFramerMotionComponent;

第二：这样使用

<AnimatedFramerMotionComponent
component="h1"
initial={{ y: "-100%", opacity: 0 }}
animate={{ y: 0, opacity: 1 }}
transition={{ delay: 1 }}
className="text-white text-8xl"
>
Regenci
</AnimatedFramerMotionComponent>