web-dev-qa-db-fra.com

Composant React et CSSTransitionGroup

premiers jours avec Facebook ReactJS. Transition de fondu en CSS simple. Cela fonctionne comme prévu avec ReactJS v0.5.1. Ce n'est pas le cas avec v11.1, v12.0, v12.1. Voici le CSS et JSX:

CSS

.example-enter {
  opacity: 0.01;
  transition: opacity .5s ease-in;
}

.example-enter.example-enter-active {
  opacity: 1;
}

.example-leave {
  opacity: 1;
  transition: opacity .5s ease-in;
}

.example-leave.example-leave-active {
  opacity: 0.01;
}

JSX pour ReactJS v12.1

/**@jsx React.DOM*/

var ReactTransitionGroup = React.addons.CSSTransitionGroup;

var HelloWorld = React.createClass({
  render: function() {
    return (
      <ReactTransitionGroup transitionName="example">
          <h1>Hello world</h1>      
      </ReactTransitionGroup>
    );
  }
});

React.render(<HelloWorld />, document.body);

Voici la liste des Codepens:

Toute aide appréciée.

Cordialement, Luca

javascriptcss3reactjs
12
Luca Anceschi

Il ressemble à CSSTransitionGroup utilisé pour animer le montage initial, mais il n’en a plus à partir de React v0.8.0 ou plus. Voir https://github.com/facebook/react/issues/1304 pour un peu plus d'informations.

Une solution consiste simplement à monter le <h1> après le montage de <HelloWorld>, comme suit:

/**@jsx React.DOM*/

var ReactTransitionGroup = React.addons.CSSTransitionGroup;

var HelloWorld = React.createClass({
  getInitialState: function() {
    return { mounted: false };
  },
  componentDidMount: function() {
    this.setState({ mounted: true });
  },
  render: function() {
    var child = this.state.mounted ?
      <h1>Hello world</h1> :
      null;

    return (
      <ReactTransitionGroup transitionName="example">
        {child}
      </ReactTransitionGroup>
    );
  }
});

React.render(<HelloWorld />, document.body);

Exemple en direct : http://codepen.io/peterjmag/pen/wBMRPX

Notez que CSSTransitionGroup est destiné à la transition des composants enfants car ils sont ajoutés, supprimés et remplacés dynamiquement, pas nécessairement pour les animer lors du rendu initial. Jouez avec ce TodoList Codepen (adapté de cet exemple dans la documentation de React ) pour voir ce que je veux dire. Les éléments de la liste apparaissent et disparaissent progressivement au fur et à mesure qu'ils sont ajoutés et supprimés, mais ils ne s'affichent pas en fondu dans le rendu initial.

EDIT: Une nouvelle phase de transition "Apparaître" a été introduite récemment pour permettre des effets d'animation sur montage. Voir https://github.com/facebook/react/pull/2512 pour plus de détails. (Le commit a déjà été fusionné dans le maître, j'imagine donc qu'il sera publié avec la v0.12.2.) Théoriquement, vous pouvez faire quelque chose comme ceci pour que le <h1> apparaisse en fondu sur le montage:

JS

...
<ReactTransitionGroup transitionName="example" transitionAppear={true}>
    <h1>Hello world</h1>
</ReactTransitionGroup>
...

CSS

.example-appear {
  opacity: 0.01;
  transition: opacity .5s ease-in;
}

.example-appear.example-appear-active {
  opacity: 1;
}
15
peterjmag

J'ai examiné le problème un peu plus loin. Avec la version actuelle de ReactJS, il ne semble pas possible d'effectuer une transition CSS initiale. Plus d'infos et réflexions ici .

Très probablement, les choses vont changer avec v0.13.x. Vous pouvez consulter le code source qui comporte un transitionAppear prop.

EDIT: J'ai téléchargé le dernier ReactJS ( v0.13.0 - alpha ) de GitHub et je l’ai construit. Tout fonctionne maintenant en conséquence si vous utilisez transitionAppear prop (doit être défini sur true de manière explicite). Ci-dessous, vous trouverez les CSS et JSX mis à jour, ainsi que l'exemple live:

CSS: 

.example-appear {
  opacity: 0.01;
  transition: opacity 0.5s ease-in;
}

.example-appear.example-appear-active {
  opacity: 1;
}

JSX pour ReactJS v0.13.0 - alpha: 

/**@jsx React.DOM*/

var ReactTransitionGroup = React.addons.CSSTransitionGroup;

var HelloWorld = React.createClass({
  render: function() {
    return (
      <ReactTransitionGroup transitionName="example" transitionAppear={true}>
          <h1>Hello world</h1>      
      </ReactTransitionGroup>
    );
  }
});

React.render(<HelloWorld />, document.body);

Exemple en direct : http://codepen.io/lanceschi/pen/NPxoGV

Cordialement, L

7
Luca Anceschi

apparaître

Normalement, un composant n'est pas transféré s'il est affiché lors du montage du composant <Transition>. Si vous souhaitez effectuer la transition sur le premier montage, définissez appear sur true et le composant effectuera la transition dès que le <Transition> sera monté. à partir du groupe de documents de réactance-transition-groupe

Exemple d'utilisation

JSX:

<TransitionGroup>
  <CSSTransition classNames="fade" appear={true} >
    <h1>Hello world!</h1>
  </CSSTransition>
</TransitionGroup>

CSS:

.fade-appear {
  opacity: 0.01;
  z-index: 1;
}
.fade-appear.fade-appear-active {
  opacity: 1;
  transition: opacity 300ms ease-in;
}

À partir de:

  • Réagir v16.6.3
  • react-transition-group v2.5.1
0
Amit 'Felix'