如何在单击 CSS-Transition 退出动画的链接时延迟 <Switch>答案

【问题标题】：How to put a delay on <Switch> upon clicking on link for CSS-Transition exit animations如何在单击 CSS-Transition 退出动画的链接时延迟 <Switch>
【发布时间】：2019-06-29 08:02:01
【问题描述】：

我有它，它正在使用 CSSTransitions 正确执行动画。但是，Switch 取消了退出和退出活动动画，它直接执行进入动画。是否可以在 Switch 上设置延迟以允许退出动画完成？

我手动尝试输入exit 和exit-active，它可以很好地执行动画。

但是当一个链接被点击时，而不是：

<div class="exit and exit-active">

运行，它的作用是 Switch 自动将 enter 放在顶部，否定退出动画，它直接进入 enter 动画

<div class="page slide-enter-done">
<div class="exit and exit-active">

App.js

import React, { Component } from 'react';
import {
  Route,
  NavLink,
  Switch
} from "react-router-dom";
import './App.css';
import './aboutme.css';
import AboutMe from './Projects';
import Home from './Home';
import About from './About';
import {
  CSSTransition,
  TransitionGroup,
} from 'react-transition-group';
// class component
class App extends Component {

  render() {

    return (
      <div className="App">
        <div className="nav">
          <NavLink exact to="/" activeClassName="active">Home</NavLink>
          <NavLink to="/about" activeClassName="active">About 
           Me</NavLink>
    </div>
    <Route render={({location}) => (
      <TransitionGroup>
        <CSSTransition 
          key={location.key}
          timeout={{enter: 300, exit: 400 }}
          classNames="slide"
        >
    <Switch location={location}>
      <Route exact path="/" component={Home} />
      <Route path="/about" component={About} />
    </Switch>
    </CSSTransition>
    </TransitionGroup>
      )} />

  </div>
);
  }
}

export default App;

App.css

.slide-enter {
  top: 0;
  left: 0;
  transform: translate3d(-100vw, 0, 0);
  color: transparent;
  background-color: #5a564c;
  position:relative;
  top:0px;
  width: 100vw;
  height: 100vh;

}
.slide-enter-active {
background-color: #9e8949;
transition: all 300ms;
transform: translate3d(0vw, 0, 0);
}

.slide-exit {
  background-color: #9e8949;
  transition: all 400ms;
  transform: translate3d(0vw, 0, 0);
}

.slide-exit-active {
transform: translate3d(100vw, 0, 0);
transition: all 300ms;
}

我想要一种显示退出动画的方法，但是每当单击链接时，它都会“覆盖”退出动画并直接进入进入动画

【问题讨论】：

标签： javascript reactjs react-router react-router-dom

【解决方案1】：

react-transition-group 是一种非常古老的 react 动画方法，react-spring 是一个更现代更完整（但重量轻）的库。

我知道这并不能完全回答您的问题，但我建议使用 react-spring 并执行类似的操作来在路线之间进行转换。

https://codesandbox.io/embed/jp1wr1867w

基于弹簧的动画让用户感觉更好的原因有很多，您可以在他们的网站上阅读其中的很多内容；但是，不必对持续时间进行硬编码总是一个好处。

【讨论】：