Question

我尝试在反应路线中创建动画，但遇到一个问题：动画有效，但但在过渡之间有空白页（白色）。好像是白色的眨眼。眨眼先走，然后是动画。有什么问题吗？

index.js -导入App组件的主要组件，如下所示。

ReactDOM.render(
    <HashRouter >
      <Route render={({ location }) => (
          <App location={location}/>
      )}/>

    </HashRouter>,
  document.getElementById('root')
);

然后 app.js 具有路由。

function App({location}) {
  return (
    <div className="App">
      <Header/>
      <main>
        <TransitionGroup>
          <CSSTransition
              timeout={200}
              classNames='page'
              key={location.pathname}>
            <Switch>
              <Route exact path='/' component={Main}/>
              <Route path='/about' component={About}/>
              <Route path='/contact' component={Contact}/>
            </Switch>
           </CSSTransition>
        </TransitionGroup>
      </main>
      <Footer/>
    </div>
  );
}

export default App;

然后 style.css

.page {
    position: absolute;
    left: 15px;
    right: 15px;
}

.page-enter {
    opacity: 0;
    transform: scale(1.1);
}

.page-enter-active {
    opacity: 1;
    transform: scale(1);
    transition: opacity 200ms, transform 300ms;
}

Answer 1

这与CSSTransition的其他用法没有什么不同，只是使请确保将location传递给Switch，以便它可以与旧位置匹配动画出来。

<Switch location={location}>

https://reactrouter.com/web/example/animated-transitions

在响应路由动画中的路由之间的白页

1 个答案: