如何正确实现页面转换的 React Transition Group

Question

我整天都在扯头发，试图让它发挥作用。我注意到的是，无论出于何种原因，过渡类 (classNames="fade") 永远不会应用于页面元素。因此，当我从一个页面导航到另一个页面时，两个页面组件都会在短时间内（超时时间）显示。

我应该在 600 毫秒内拥有什么...

<div class="RTG"> 
    <div class="page fade-appear fade-enter fade-enter-active"> <!-- 
destination component HTML --></div>
    <div class="page fade-exit fade-exit-active"> <!-- start component HTML --></div>
</div>

我得到的是..

<div class="RTG">
   <!-- "fade..." classes never applied to the child nodes" -->
   <div class="page"> <!-- destination component HTML --></div>
   <div class="page"> <!-- start component HTML --></div>
</div>

然后在 600 毫秒超时后，我只剩下......

<div class="RTG">
   <div class="page"> <!-- destination component HTML --></div>
</div>

注意 1：我将“RTG”类名放在 TransitionGroup 组件上，只是为了验证我的“页面”类组件实际上是 TransitionGroup 组件的直接后代。不存在任何其他原因。

注意 2：我使用的是 react-transition-group@2.4.0，因为我与最新版本存在兼容性问题。

AppRouter.js

import PrivateRoute from './PrivateRoute';
import PublicRoute from './PublicRoute';
import { CSSTransition, TransitionGroup } from 'react-transition-group'



const AppRouter = () => (
    <Router history={history}>
        <Route render={({location}) => {
            return (
                <TransitionGroup className="RTG">
                <CSSTransition 
                    key={location.key}
                    timeout={600}
                    classNames="fade"
                >
                    <Switch location={location}>
                        <PublicRoute path="/" component={LoginPage} exact={true} />
                        <PrivateRoute path="/dashboard" component={ExpenseDashboardPage} />
                        <PrivateRoute path="/create" component={AddExpensePage} />
                        <PrivateRoute path="/edit/:id" component={EditExpensePage} />
                        <Route component={NotFoundPage} />
                    </Switch>
                </CSSTransition>
           </TransitionGroup>
            );
        }} />

    </Router>
);


export default AppRouter;

私有路由.js

export const PrivateRoute = ({ 
    isAuthenticated, 
    component: Component,
    ...rest
}) => (
    <Route {...rest} component={(props) => (
        isAuthenticated ? (
            <div className="page">
                <Header />
                <Component {...props} />
            </div>
        ) : (
            <Redirect to="/" />
        )
    )} />
);

const mapStateToProps = (state) => ({
    isAuthenticated: !!state.auth.uid
});

export default connect(mapStateToProps)(PrivateRoute);

公共路由.js

export const PublicRoute = ({ 
    isAuthenticated, 
    component: Component,
    ...rest
}) => (
    <Route {...rest} component={(props) => (
        isAuthenticated ? (
            <Redirect to="/dashboard" />
        ) : (
            <div class="page">
                <Component {...props} />
            </div>
        )
    )} />
);

const mapStateToProps = (state) => ({
    isAuthenticated: !!state.auth.uid
});

export default connect(mapStateToProps)(PublicRoute);

适用的 CSS 样式

.page {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
}

.fade-appear,
.fade-enter {
    opacity: 0;
    z-index: 1;
}

.fade-appear-active,
.fade-enter.fade-enter-active {
    opacity: 1.0;
    transition: opacity 300ms linear 150ms;
}

.fade-exit {
    opacity: 1.0;
}

.fade-exit.fade-exit-active {
    opacity: 0;
    transition: opacity 150ms linear;
}

Answer 1

显然，您需要包装<Switch>在父组件中。

CSSTransition工作，因为它会尝试注入classNames它的孩子作为道具。这意味着子元素需要获取这些道具并作为classNames. 因此，您需要包装<Switch>到另一个组件中以确保此机制正常工作。

在 CodeSandbox 上编辑

const AppRouter = () => (
  <Router>
    <Route
      render={({ location }) => {
        return (
          <TransitionGroup className="RTG">
            <CSSTransition key={location.key} timeout={600} classNames="fade">
              <div>
                <Switch location={location}>
                  <PublicRoute path="/" component={LoginPage} exact={true} />
                  <PrivateRoute
                    path="/dashboard"
                    component={ExpenseDashboardPage}
                  />
                  <PrivateRoute path="/create" component={AddExpensePage} />
                  <PrivateRoute path="/edit/:id" component={EditExpensePage} />
                  <Route component={NotFoundPage} />
                </Switch>
              </div>
            </CSSTransition>
          </TransitionGroup>
        );
      }}
    />
  </Router>
);