web-dev-qa-db-fra.com

ReactCSSTransitionGroup seulement bon pour l'animation dans le nouveau composant?

J'ai ReactCSSTransitionGroup qui fonctionne bien (je pense), le composant nouvellement monté s’efface dans toute sa splendeur.

Le problème est que le composant en cours de remplacement disparaît soudainement, ce qui me pose problème car, éventuellement, j'aimerais que mes composants fassent la transition dans la fenêtre d'affichage ...

Je ne vois pas comment il serait possible de dire à la composante en train de disparaître avec élégance.

Est-ce que je manque quelque chose ou ReactCSSTransitionGroup est-il uniquement capable d'animer le composant entrant?

METTRE À JOUR

Code ci-dessous:

import React from "react";
import ReactDOM from "react-dom";
import { Router, Route, IndexRoute, hashHistory, Link } from "react-router";
import ReactCSSTransitionGroup from "react-addons-css-transition-group";


class PageOne extends React.Component {
  render() {
    return (
      <ReactCSSTransitionGroup transitionName="example" transitionAppear={true} transitionAppearTimeout={500} transitionEnterTimeout={500} transitionLeaveTimeout={500}>
        <div>
          HI FROM PAGE ONE<br />
          <br />
          <Link to="two">Take me to Page Two</Link>
        </div>
      </ReactCSSTransitionGroup>
    );
  }
}
class PageTwo extends React.Component {
  render() {
    return (
      <ReactCSSTransitionGroup transitionName="example" transitionAppear={true} transitionAppearTimeout={500} transitionEnterTimeout={500} transitionLeaveTimeout={500}>
        <div>
          HELLO FROM PAGE TWO<br />
          <br />
          <Link to="/">Go back to Page One</Link>
        </div>
      </ReactCSSTransitionGroup>
    );
  }
}


const app = document.getElementById('app');
ReactDOM.render(
  <Router history={hashHistory}>
    <Route path="/" component={PageOne}></Route>
    <Route path="two" component={PageTwo}></Route>
  </Router>,
app);

Et le CSS:

.example-enter {
  opacity: 0.01;
}
.example-enter.example-enter-active {
  opacity: 1;
  transition: opacity 500ms ease-in;
}
.example-leave {
  opacity: 1;
}
.example-leave.example-leave-active {
  opacity: 0.01;
  transition: opacity 300ms ease-in;
}
reactjsreactcsstransitiongroup
9
Stefan

Ok, on dirait qu'ils ont déjà réglé le problème et que je ne l'ai pas découvert jusqu'à présent.

Le dépôt git de React-Router contient une liste d’exemples et en contient un pour "Animation". Cette démonstration montre comment vous pouvez utiliser ReactCSSTransitionGroup pour animer des "pages" in/out en clonant l'élément et en attribuant une clé.

https://reacttraining.com/react-router/web/example/animated-transitions

4
Stefan

J'ai créé un bin qui fonctionne très bien pour les composants montés/démontés. Jetez un coup d'oeil et laissez-moi savoir si c'est id semblable à ce que vous faites et toujours pas capable de résoudre le problème

2
Aditya Singh