Как установить задержку на <Switch>после нажатия на ссылку для анимации выхода CSS-Transition - PullRequest
Новая
       20

Как установить задержку на <Switch>после нажатия на ссылку для анимации выхода CSS-Transition

0 голосов
/ 29 июня 2019

У меня внутри, и он правильно выполняет анимацию с помощью CSSTransitions. Тем не менее, коммутатор отменяет анимацию выхода и анимацию выхода и сразу переходит к анимации ввода. Можно ли установить задержку на Switch, чтобы завершить анимацию выхода?

Я вручную попытался ввести exit и exit-active, и анимация работает нормально.

Но при нажатии на ссылку вместо: 

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

работает, что он делает, Switch автоматически ставит ввод сверху, отменяя анимацию выхода, и он просто идет прямо к анимации ввода 

<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;
}

Мне нужен способ показать анимацию выхода, но всякий раз, когда по ссылке нажимают, она «закрывает» анимацию выхода и переходит прямо к анимации ввода

1 Ответ

0 голосов
/ 29 июня 2019

response-transition-group - это очень старый подход к анимации с реагированием, response-spring - более современная, более полная (но легковесная) библиотека.

Я знаю, что это не полностью отвечает на ваш вопросно я бы предложил использовать ответную пружину и сделать что-то подобное для перехода между маршрутами.

https://codesandbox.io/embed/jp1wr1867w

Есть много причин, по которым анимация на основе пружины удобнее для пользователей, многие из которыхвы можете прочитать о них на их сайте;однако просто не нужно жестко кодировать длительность - это всегда бонус.

...