MENU


<TransitionMotion>

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

'Square c' shrinks till disappearance.
import React, { useState, useEffect } from 'react';
import { spring, TransitionMotion } from 'react-motion';

export default function App() {
  const [items, setItems] = useState([
    { key: 'a', size: 100 },
    { key: 'b', size: 200 },
    { key: 'c', size: 300 },
  ]);

  useEffect(() => {
    setItems([{ key: 'a', size: 100 }, { key: 'b', size: 200 }]); // remove c.
  }, []);

  function willLeave() {    // triggered when c's gone. Keeping c until its width/height reach 0.
    return { width: spring(0), height: spring(0) };
  }

  return (
    <TransitionMotion
      willLeave={willLeave}
      styles={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 => (
            <div key={config.key} style={{ ...config.style, border: '1px solid' }} />
          ))}
        </div>
      }
    </TransitionMotion>
  );
}