Question

我想在React Router v4中的路由之间切换时创建一个简单的淡入淡出动画。

我的方法完全基于这个人的tutorial，他用react-transition-group的{{1}}和TransitionGroup来产生效果。

到目前为止，褪色效果有效，但不完全有效。

每当我导航到新路线时，同一组件都会出现两次。一个在另一个之上，而下一个则迅速消失。

我该如何解决？

到目前为止，我要使重复出现的错误消失的唯一方法是将每个子组件设置为CSSTransition。但是，由于每个组件的长度都是动态的，因此position:fixed的位置会被弄乱。有时会导致页脚与上面的组件重叠。

App.js

footer

style.css

import React, { Component } from "react";
import { Switch, Route } from "react-router-dom";
import { CSSTransition, TransitionGroup } from "react-transition-group";

// Sass styling
import "./sass/main.scss";

// Website components
import Navbar from "./components/navbar/Navbar";
import Homepage from "./components/mainContent/homepage/Homepage";
import Menu from "./components/mainContent/menu/Menu";
import HowTo from "./components/mainContent/howto/HowTo";
import ContactUs from "./components/mainContent/contactus/ContactUs";
import Footer from "./components/footer/Footer";
import Error from "./components/Error";

// Website parent component
class App extends Component {
  render() {
    return (
      <>
        <Navbar />
        <Route
          render={({ location }) => (
            <TransitionGroup>
              {/* React router transitions */}
              <CSSTransition key={location.key} timeout={300} classNames="fade">
                <Switch>
                  {/* Website routes with specified url endings */}
                  <Route path="/" component={Homepage} exact />
                  <Route path="/menu" component={Menu} exact />
                  <Route path="/how-to" component={HowTo} exact />
                  <Route path="/contact-us" component={ContactUs} exact />
                  {/* Route 404 not found */}
                  <Route component={Error} />
                </Switch>
              </CSSTransition>
            </TransitionGroup>
          )}
        />
        <Footer />
      </>
    );
  }
}

export default App;

我乐于接受其他方法来在ReactJS中进行页面转换，因此，非常感谢您的帮助！谢谢。

Answer 1

我知道它很旧，但这是解决方案：
您需要使用

Switch location={location}

希望有帮助。

Answer 2

您可以使用react-transition-group lib。查找文档和示例代码here。请注意，禁止使用。
关于CSS和固定页脚的位置，该示例还使用了一个容器position: relative和一个页面position: absolute。但是我已经使用CSS网格成功实现了react-transition-group。

如何修复React Router v4页面过渡动画错误？

2 个答案: