Animation Fade out using font-size 0

fade.js

import React, { useState } from "react";
import ReactDOM from "react-dom";
import { Transition } from "react-transition-group";

import "./styles.css";

function App() {
  const [visible, setVisible] = useState(true);

  return (
    <div
      className="App"
      style={{
        transition: "all 1s ease"
      }}
    >
      <Header visible={visible} />
      <div style={{ transition: "all 1s ease" }}>
        <h1 onClick={() => setVisible(!visible)}>Hello CodeSandbox</h1>
        <h2>Start editing to see some magic happen!</h2>
      </div>
    </div>
  );
}

function Header(props) {
  return (
    <FadeIn {...props}>
      <div>SICK FADE OUT BRO!</div>
    </FadeIn>
  );
}

const FadeIn = props => {
  const defaultFontSize = 16;
  const transitionStyles = {
    entering: {
      opacity: 0,
      fontSize: defaultFontSize
    },
    entered: {
      opacity: 1,
      fontSize: defaultFontSize
    },
    exiting: {
      opacity: 0
    },
    exited: {
      opacity: 0,
      fontSize: 0
    }
  };
  const duration = 300;

  const defaultStyle = {
    transition: `all ${duration}ms ease-in-out`,
    opacity: 0,
    display: "block",
    padding: 0,
    margin: 0,
    fontSize: defaultFontSize,
    backgroundColor: "pink"
  };
  return (
    <Transition in={props.visible} timeout={duration}>
      {state => (
        <div
          style={{
            ...defaultStyle,
            ...transitionStyles[state]
          }}
        >
          {props.children}
        </div>
      )}
    </Transition>
  );
};

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);