反应 CSSTransition 不过渡答案

【问题标题】：React CSSTransition not transitioning反应 CSSTransition 不过渡
【发布时间】：2019-04-08 01:42:41
【问题描述】：

我正在使用 react-transition-group 并且代码正在呈现，但页面没有使用动画进行过渡。如果重要的话，我正在使用 react-router-dom 中的 Link 和 NavLink。

我尝试延长 timeOut 以查看 DOM 更改无济于事。我已经多次重构代码，假设我的代码一定是错误的，但无济于事。我已经尝试过 react-transition-group-v2 但发现大多数在线资源仍在使用 v1，试图按照他们的指示无济于事。 Latest example。还是一头雾水。

import React, { Component } from 'react';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
import { ParallaxProvider } from 'react-scroll-parallax';
import { request_page } from "./data/fetch_data.js";
import { TransitionGroup, CSSTransition } from "react-transition-group";

// global components
import Navigation from "./components/Header/Navigation.js";
import Work_With_Us from "./components/Global/Work_With_Us_Button.js";

// routes
import Home from './pages/Home';
import Work from './pages/Work';
import Case_Study from './pages/Case_Study';
import About from './pages/About';


class App extends Component {
    render() {
        return (
            <Router>
                <div className="site-contain">
                    <Navigation />
                    <Work_With_Us />
                    <TransitionGroup>
                        <CSSTransition key={location.key} classNames="page" timeout={30000}>
                            <Switch location={location}>
                                <ParallaxProvider>
                                    <Route exact path='/' component={Home}/>
                                    <Route path='/work/:case_study' component={Case_Study} />
                                    <Route path='/work' component={Work}/>
                                    <Route path='/about' component={About}/>
                                </ParallaxProvider>
                            </Switch>
                        </CSSTransition>
                    </TransitionGroup>
                </div>
            </Router>
        );
    }
}

export default App;

【问题讨论】：

标签： reactjs react-router react-transition-group

【解决方案1】：

这是因为 location.key 每次路由更新时都会不断变化。

因此，要解决此问题，您可以尝试使用 this.props.location.pathname 而不是 this.props.location.key。类似const currentKey = location.pathname.split('/')[1] || '/'

工作示例：https://codesandbox.io/s/4RAqrkRkn?view=preview

GitHub 上还有一个问题，提供了更多示例和方法，请查看：https://github.com/ReactTraining/react-router/issues/5279

干杯！

【讨论】：