React 的 Framer Motion 页面转换 - 问题答案

【问题标题】：Framer Motion Page Transitions for React - ProblemReact 的 Framer Motion 页面转换 - 问题
【发布时间】：2021-03-26 15:09:52
【问题描述】：

我正在编写一个简单的应用程序，我想使用 framer-motion 库添加页面过渡。我面临的问题是，我看到的每个教程和文档都在每个组件中使用标记，我觉得这很烦人。

这是我的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 >

);

如果我想添加动画，我必须在每个组件中添加。我想要做的（并且无法使其工作）是这样的：

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

自上周以来，我一直被困在这个问题上。如果有人能帮我解决这个问题，我将不胜感激！

【问题讨论】：

标签： javascript reactjs react-transition-group framer-motion

【解决方案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>

【讨论】：