Difference between react-spring and react-transition-group animated modals

react-portal-animated-modals.jsx

import Component from "@reach/component-component";
import { Transition } from 'react-spring';
import { Transition as Transition2 } from 'react-transition-group';
import ReactDOM from 'react-dom';
import React from 'react';
import logo from './logo.svg';
import './App.css';

const style = {
  padding: 10,
  width: 400,
  height: 200,
  position: 'fixed',
  top: 500,
  left: 100,
  background: 'gray',
  boxShadow: '2px 2px rgba(0, 0, 0, 0.2)',
};

class MyPortal extends React.Component {
  render() {
    return ReactDOM.createPortal(
      this.props.children,
      document.querySelector('#portal'),
    );
  }
}

const duration = 300;

const defaultStyle = {
  transition: `opacity ${duration}ms ease-in-out`,
  opacity: 0,
}

const transitionStyles = {
  entering: { opacity: 0 },
  entered:  { opacity: 1 },
};

class App extends React.Component {
  render() {
    return (
      <div className="App">
        <header className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <h1 className="App-title">Welcome to React</h1>
        </header>
        <p className="App-intro">
          To get started, edit <code>src/App.js</code> and save to reload.
        </p>

        <Component initialState={{ open: false }}>
          {({ state, setState }) => (
            <div>
              <button onClick={() => setState({ open: !state.open })}>
                toggle react-spring dialog
              </button>

              <Transition
                from={{ opacity: 0, y: -10 }}
                enter={{ opacity: 1, y: 0 }}
                leave={{ opacity: 0, y: 10 }}
              >

                {state.open && (styles => (
                  <MyPortal>
                    <div style={{ ...style, opacity: styles.opacity }}>
                      hi, this is react-spring, the latest greatest animation library for react
                    </div>
                  </MyPortal>
                ))}

              </Transition>

            </div>
          )}
        </Component>

        <Component initialState={{ open: false }}>
          {({ state, setState }) => (
            <div>
              <button onClick={() => setState({ open: !state.open })}>
                toggle react-transition-group dialog ({ state.open.toString() })
              </button>

              <Transition2
                appear
                in={state.open}
                timeout={duration}
                unmountOnExit
                mountOnEnter
              >
                  {(_state) => (
                    <MyPortal>
                      <div style={{
                        ...style,
                        ...defaultStyle,
                        ...transitionStyles[_state],
                      }}>
                        <div>{_state}</div>
                        <div>
                          hi, this is react-transition-group-v2, forces you to provide a duration, wah wah
                        </div>
                      </div>
                    </MyPortal>
                )}
              </Transition2>
            </div>
          )}
        </Component>

      </div>
    );
  }
}

export default App;