import { TransitionTween, Tween } from 'react-tween'; // Tween is declarative. // The style defines the destination value. // Whenever the destination value changes, the style is animated to that // destination value. <Tween style={{ opacity: 1 }}> {style => ( <div style={{ opacity: style.opacity }}> Animate opacity </div> )} </Tween> // TransitionTween takes the place of TransitionGroup. <TransitionTween styles={[ { // The key is the child component key. key: '0', // The style is the set of values being animated. style: { height: 100 }, // The data is an arbitrary value associated with the key. data: '0', }, { key: '1', style: { height: 200 }, data: '1', }, ]} // The willEnter prop defines the initial style when an item is added. // By default, the initial style is the one given by the styles array. willEnter={() => ({ height: 0 })} // The willLeave prop defines the final style when an item is removed. // By default, the final style is whatever the item's style is at the time // it is removed. willLeave={() => ({ height: 0 })} > {styles => ( <div className="bars"> {styles.map(style => ( <div className="bar" key={style.key} style={{ height: style.style.height }} /> ))} </div> )} </TransitionTween> // Both Tween and TransitionTween support customized delay, duration, and // easing. import { easeSinInOut } from 'd3-ease'; <Tween delay={500} duration={1000} easing={easeSinInOut} style={{ opacity: 1 }} > {/* ... */} </Tween>