Comment utiliser React TransitionMotion willEnter ()

À l'aide de TransitionMotion de React Motion , je veux animer 1 ou plusieurs boîtes à l'intérieur et à l'extérieur. Lorsqu'une boîte entre dans la vue, sa largeur et sa hauteur devraient passer de 0 pixels à 200 pixels et son opacité devrait aller de 0 à 1. Lorsque la case sort de la vue, l'inverse devrait se produire (largeur / hauteur = 0, opacité = 0 )

J'ai essayé de résoudre ce problème ici http://codepen.io/danijel/pen/RaboxO mais mon code est incapable de passer correctement la boîte. Le style de la boîte saute immédiatement à une largeur / hauteur de 200 pixels au lieu de la transition.

Qu'est-ce qui ne va pas avec le code?

let Motion = ReactMotion.Motion let TransitionMotion = ReactMotion.TransitionMotion let spring = ReactMotion.spring let presets = ReactMotion.presets const Demo = React.createClass({ getInitialState() { return { items: [] } }, componentDidMount() { let ctr = 0 setInterval(() => { ctr++ console.log(ctr) if (ctr % 2 == 0) { this.setState({ items: [{key: 'b', width: 200, height: 200, opacity: 1}], // fade box in }); } else { this.setState({ items: [], // fade box out }); } }, 1000) }, willLeave() { // triggered when c's gone. Keeping c until its width/height reach 0. return {width: spring(0), height: spring(0), opacity: spring(0)}; }, willEnter() { return {width: 0, height: 0, opacity: 1}; }, render() { return ( <TransitionMotion willEnter={this.willEnter} willLeave={this.willLeave} defaultStyles={this.state.items.map(item => ({ key: item.key, style: { width: 0, height: 0, opacity: 0 }, }))} styles={this.state.items.map(item => ({ key: item.key, style: { width: item.width, height: item.height, opacity: item.opacity }, }))} > {interpolatedStyles => <div> {interpolatedStyles.map(config => { return <div key={config.key} style={{...config.style, backgroundColor: 'yellow'}}> <div className="label">{config.style.width}</div> </div> })} </div> } </TransitionMotion> ); }, }); ReactDOM.render(<Demo />, document.getElementById('app')); 

• Enregistrement des requêtes REST auprès des agents de service pour les synchroniser
• Traitement en différé contre traitement côté client + ajax?
• Pourquoi dois-je omettre les parenthèses lorsque je passe une fonction comme argument?
• Comment obtenir la valeur d'un champ pendant l'événement de collage?
• Angulaire et plus tard

• Existe-t-il une possibilité de transition fluide pour la taille d'une police d'animation dans Raphael JS?
• Pourquoi 42.toString () échoue dans JS?
• Réduire les réducteurs Redux et autres composants non-composants
• Générer un mot de passe sécurisé en javascript
• Ajouter une classe à un élément

 styles={this.state.items.map(item => ({ key: item.key, style: { width: spring(item.width), height: spring(item.height), opacity: spring(item.opacity) } }))}