Comment ajouter une bibliothèque d'animation de ReactJS et animer .CSS à animer

voir https://facebook.github.io/react/docs/animation.html

Vous pouvez utiliser réacteurTtransitiongroup code> et utiliser les rappels pour configurer les classes d'animate.css sur les nœuds enfants. P>

Notez que vous ne pouvez pas utiliser directement ReactCstransitionGroup Code> En raison de la convention de nom de classe Il a: vous devez contrôler les noms de classe d'animation afin de suivre la convention de réacte. Je veux dire .TransitionName-Enter-active code> est ce que réactecstransitiongroup code> met sur le nœud pour animer, pendant que vous auriez besoin de quelque chose comme .nanate zoomin code>.

edit fort> p>

Selon Ce commit / problème je vois que vous pouvez maintenant personnaliser tout le ReactCsstransitionGroup code> Names de classe. P>

Regardez les PROPTYPES: P>

var TodoList = React.createClass({
  getInitialState: function() {
      var todos = [  {text: "Init Todo1"}  ,  {text: "Init Todo2"}   ];
      return {todos: todos}; 
  },

  add: function() {
      var todos = this.state.todos;
      todos.push({text: "New!"});
      this.setState({todos: todos});
  },
  remove: function() {
      var todos = this.state.todos;
      todos.pop();
      this.setState({todos: todos});
  },

  render: function() {
    var todos = this.state.todos.map(function(todo, index) {
      return <Todo key={index} todo={todo}/>
    });
    return (
        <div>
            <div onClick={this.add}>Add</div>
            <div onClick={this.remove}>Remove</div>
            <br/>
            <div>
                <ReactCSSTransitionGroup transitionName={{enter: "animated bounce", enterActive: "animated bounce", leave: "animated tada",leaveActive: "animated tada"}}>
                    {todos}
                </ReactCSSTransitionGroup>
            </div>
        </div>
    );
  }
});

var Todo = React.createClass({
  render: function() {
    return <div>{this.props.todo.text}</div>;
  }
});

Sébastien, vous étiez sur la bonne voie, mais je pense que vous avez mal compris entre VS Enteractive:

Fiddle de travail:

http://jsfiddle.net/mjv2y58o/ xxx

Votre proposition pour permettre à plusieurs noms de classe est toujours valide, comme Il serait utile pour les classes utilitaires telles que infinis , mais il n'est pas nécessaire d'utiliser l'animate.css avec réact 0,14.

Cependant, bon nombre d'animations d'entrée d'Animate.css Ne jouez pas bien avec réaction, en particulier dans Safari. Il y a un bref délai après que le composant soit ajouté à la DOM et avant la démarrage de l'animation, donc à l'entrée, vous obtiendrez un éclairage du composant avant de se cacher et d'être animé en vue.