MENU


<TransitionMotion>

<TransitionMotion> helps you to do mounting and unmounting animation.

'Square c' shrinks till disappearance.
RESETRUNFULL
import React from 'react';import { spring, TransitionMotion } from 'react-motion';export default class App extends React.Component {
  constructor() {
    super();
    this.state= {
      items: [{key: 'a', size: 100}, {key: 'b', size: 200}, {key: 'c', size: 300}],
    };
  }
  componentDidMount() {
    this.setState({
      items: [{key: 'a', size: 100}, {key: 'b', size: 200}], // remove c.
    });
  }
  willLeave() {    // triggered when c's gone. Keeping c until its width/height reach 0.
    return {width: spring(0), height: spring(0)};
  }
  render() {
    return (
      <TransitionMotion
        willLeave={this.willLeave}
        styles={this.state.items.map(item => ({
          key: item.key,
          style: {width: item.size, height: item.size},
        }))}>
        {interpolatedStyles =>          // first render: a, b, c. Second: still a, b, c! Only last one's a, b.
           <div>
            {interpolatedStyles.map(config => {
              return <div key={config.key} style={{...config.style, border: '1px solid'}} />
            })}
          </div>
        }
      </TransitionMotion>
    );
  }}