Comment ajouter reactjs d'animation de la bibliothèque et de les Animer .css pour animer

J'ai cette simple Liste de choses à faire,

Je besoin d'ajouter de l'animation.css bibliothèque d'animations lors de l'ajout et de la suppression. Im vraiment nouveau à réagir. J'ai lu la documentation, mais dur t comprendre,

C'est une question de demander de l'aide à l'encodage.

http://jsfiddle.net/johnthethird/NXCyC/7/

/** @jsx React.DOM */
var TodoList = React.createClass({
propTypes: {items: React.PropTypes.array},
render: function() {
var createItem = function(itemText) {
return <li>{itemText}</li>;
};
return <ul>{this.props.items.map(createItem)}</ul>;
}
});
var TodoApp = React.createClass({
getInitialState: function() {
return {items: [], text: ''};
},
onChange: function(e) {
this.setState({text: e.target.value});
},
handleSubmit: function(e) {
e.preventDefault();
var nextItems = this.state.items.concat([this.state.text]);
var nextText = '';
this.setState({items: nextItems, text: nextText});
},
render: function() {
return (
<div>
<h3>TODO</h3>
<TodoList items={this.state.items} />
<form onSubmit={this.handleSubmit}>
<input onChange={this.onChange} value={this.state.text} />
<button>{'Add #' + (this.state.items.length + 1)}</button>
</form>
</div>
);
}
});
React.renderComponent(<TodoApp />, document.body);

OriginalL'auteur Sahan | 2015-06-18

5

Un vieux thread mais je pense que j'ai un facile, direct solution pour cela.

Je l'ai fait de cette façon, j'ai téléchargé le animate.css de la part du fournisseur et écrit mon styles.css importation animate.css comme ci-dessous.
```
@import "lib/animate.css";
.headerForm-enter {
animation: 0.8s flipInX ease;
}
.headerForm-leave {
animation: 0.5s flipOutX ease;
}
```
Remarque que je suis en utilisant les animations de animate.css dans la réagir classe générée. Le ReactCSSTransitionGroup est comme ci-dessous.
```
<ReactCSSTransitionGroup
transitionName='headerForm'
transitionEnterTimeout={800}
transitionLeaveTimeout={500}>
{content}
</ReactCSSTransitionGroup>
```
OriginalL'auteur Vishal Sharma
4

Sébastien, vous étiez sur était sur la bonne voie, mais je pense que vous avez mal compris entrez vs enterActive:

De travail violon:

http://jsfiddle.net/mjv2y58o/
```
<ReactCSSTransitionGroup transitionName={{enter: "animated", enterActive: "bounce", leave: "animated",leaveActive: "tada"}}>
```
Votre proposition pour permettre à de multiples noms de classe est encore valide, car il serait utile pour les classes utilitaires tels que infinite, mais il n'est pas nécessaire d'obtenir de l'Animer.css de travail à réagir à 0,14.

Cependant, beaucoup de les Animer.css entrée animations de ne pas jouer gentil avec Réagir, en particulier dans Safari. Il y a un bref délai après que le composant est ajouté au dom et avant le début de l'animation, donc sur entrée, vous aurez un flash de la pièce, avant qu'il soit caché et d'animation en vue.

OriginalL'auteur Matt
3

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

Vous pouvez utiliser ReactTransitionGroup et utiliser les rappels à l'installation de l'animer.les classes css sur les nœuds enfants.

Notez que vous ne pouvez pas utiliser directement ReactCSSTransitionGroup parce que le nom de la classe la convention, elle a: vous avez à contrôler l'animation de la classe de noms dans l'ordre à suivre Réagir convention. Je veux dire .transitionName-enter-active est ce que ReactCSSTransitionGroup met sur le nœud pour animer, alors que vous auriez besoin de quelque chose comme .animate zoomIn.

Modifier

Selon ce commit /question je vois que vous pouvez maintenant personnaliser tous les ReactCSSTransitionGroup les noms de classe.

Regarder la proptypes:
```
  propTypes: {
transitionName: React.PropTypes.oneOfType([
React.PropTypes.string,
React.PropTypes.shape({
enter: React.PropTypes.string,
leave: React.PropTypes.string
}),
React.PropTypes.shape({
enter: React.PropTypes.string,
enterActive: React.PropTypes.string,
leave: React.PropTypes.string,
leaveActive: React.PropTypes.string
})
]).isRequired,
transitionAppear: React.PropTypes.bool,
transitionEnter: React.PropTypes.bool,
transitionLeave: React.PropTypes.bool
},
```
Je pense qu'il est uniquement disponible pour Réagir 0.14.0 (encore en beta)

Unfurtunatly selon mes tests, ce n'est pas assez pour supporter facilement Animer.CSS hors de la boîte.

Avec la nouvelle version, on devrait être capable d'écrire:
```
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>;
}
});
```
http://jsfiddle.net/ghmpo42k/6/

Unfurtunatly cela ne fonctionne pas, pourtant, à cause d'une non prise en charge des cas qui ne permet pas de définir plusieurs classes en même temps. Mentionne le fait que Réagir sur le problème de sorte qu'il est pris en charge dans l'avenir.

Dans le cadre, vous pouvez simplement copier le ReactCSSTransitionGroup et de résoudre le bug vous-même 🙂

pouvez-vous fournir plus d'informations comment faire?
fondamentalement, l'idée est de copier ReactCSSTransitionGroup et de faire les modifications que vous avez besoin.
mon problème est releted à cette question, vous savez peut-être quelque chose de plus à ce sujet? lien de la Pile

OriginalL'auteur Sebastien Lorber
2

Venez de trouver une solution pour que.

Il ne fonctionne pas à 100% douceur, mais il à l'air vraiment sympa dans certains composants:
```
events = this.props.schedule.map(function(event) {
return (
<li className="animated" key={event.time}>
<ScheduleEventItem event={event} />
</li>
);
});
return (
<React.addons.CSSTransitionGroup className="animated" 
transitionName={{enter: "flipInX", leave: "flipOutX"}}
transitionEnterTimeout={1000} transitionLeaveTimeout={1}
>
{events}
</React.addons.CSSTransitionGroup>
);
```
Mettre de l'animation de la classe sur les éléments d'enfant.

Il est également important de maintenir la transitionEnterTimout à 1000. C'est le temps qu'il faut pour l'animer.css animation pour l'exécuter. Réagir a besoin de savoir qu'. J'ai réglé le transitionLeaveTimeout de 1 parce que je n'aimais pas sur le leaveAnimation. Vous aurez probablement à le tordre à vos besoins.

OriginalL'auteur João Paulo Motta

Vous devez vous connecter pour publier un commentaire.

Mettre de l'animation de la classe sur les éléments d'enfant.