Question

我正在从事一个项目，该项目需要我在React Router上构建页面转换。到目前为止，我已经使此代码起作用：

app.js

res.render

styles.css

import React from "react";
import ReactDOM from "react-dom";
import {
  BrowserRouter,
  Switch,
  Route,
  NavLink,
  useLocation
} from "react-router-dom";
import { TransitionGroup, CSSTransition } from "react-transition-group";
import "./styles.css";

const App = () => {
  return (
    <BrowserRouter>
      <Switch>
        <Route path="*">
          <MyApp />
        </Route>
      </Switch>
    </BrowserRouter>
  );
};

const MyApp = () => {
  const location = useLocation();
  return (
    <div>
      <NavLink to="/page1">Page1</NavLink>
      <NavLink to="/page2">Page2</NavLink>

      <TransitionGroup>
        <CSSTransition
          key={location.key}
          classNames="cloud-animate"
          timeout={800}
        >
          <Switch location={location}>
            <Route path="/page1" component={Page1} key="page1" />
            <Route path="/page2" component={Page2} key="page2" />
          </Switch>
        </CSSTransition>
      </TransitionGroup>
    </div>
  );
};

const Page1 = () => <h1>This is page 1</h1>;
const Page2 = () => <h1>This is page 2</h1>;

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

我的问题是：

当我单击任何链接时，组件本身会显示在过渡元素上。为什么会这样？
我可以使用视频或其他组件作为过渡叠加层吗？还是实施Lottie动画？
我的目标是使屏幕上充满云朵，更换组件并将云朵移出。我应该使用退出动画在屏幕上填充云还是输入动画来删除云吗？

这是当前代码：https://codesandbox.io/s/laughing-snowflake-4i9ur

使用React Transition Group的React Router自定义动画过渡

0 个答案: