import { Animate } from "react-show";

const SimpleExample = () => (
  <Animate
    show={true || false} // Toggle true or false to show or hide the content!
    duration={500}
    style={{
      height: "auto"
    }}
    start={{
      height: 0 // The starting style for the component.
      // If the 'leave' prop isn't defined, 'start' is reused!
    }}
  >
    Hello world!
  </Animate>
);

import { Animate } from "react-show";

const SimpleExample = () => (
  <Animate
    show={true || false} // Toggle true or false to show or hide the content!
    transitionOnMount // Will trigger the transition when the component is mounted and show === true
    preMount // Mounts the component's children on first render even if show === false
    stayMounted // Forces the component's children to remain mounted when show === false
    component="span" // Use a <span> (or custom) component as the wrapper instead of a <div>
    style={{
      // The permanent styles for the component
      height: `${Math.random() * 100}px`,
      background: "white"
    }}
    start={{
      // The starting styles for the hidden component.
      opacity: 0,
      height: 0
    }}
    enter={{
      // These styles will be applied when the component enters
      opacity: 1,
      height: 'auto'
      background: "green"
    }}
    leave={{
      // these styles will be applied when the component leaves
      opacity: 0,
      height: 0,
      background: "red"
    }}
  >
    Hello world!
  </Animate>
);

import { Animate } from "react-show";

const DurationAndEasingExample = () => (
  <Animate
    show={true || false} // Toggle true or false to show or hide the content!
    duration={500} // // The duration of the transition in milliseconds
    easing={Animate.easings.easeOutQuad} // Comes with all the easings you could want!
    enter={{
      // Only use this duration/delay during the `enter` stage
      transitionDuration: ".3s",
      transitionDelay: "1s"
    }}
  >
    Hello world!
  </Animate>
);

import { Animate } from "react-show";

const SimpleExample = () => (
  <Animate show={true} easing={Animate.easings.easeOutQuart}>
    Hello world!
  </Animate>
);

import { easings } from "react-show";

easings ===
  {
    // Cubic
    easeInCubic: "cubic-bezier(0.550, 0.055, 0.675, 0.190)",
    easeOutCubic: "cubic-bezier(0.215, 0.610, 0.355, 1.000)",
    easeInOutCubic: "cubic-bezier(0.645, 0.045, 0.355, 1.000)",

    // Circ
    easeInCirc: "cubic-bezier(0.600, 0.040, 0.980, 0.335)",
    easeOutCirc: "cubic-bezier(0.075, 0.820, 0.165, 1.000)",
    easeInOutCirc: "cubic-bezier(0.785, 0.135, 0.150, 0.860)",

    // Expo
    easeInExpo: "cubic-bezier(0.950, 0.050, 0.795, 0.035)",
    easeOutExpo: "cubic-bezier(0.190, 1.000, 0.220, 1.000)",
    easeInOutExpo: "cubic-bezier(1.000, 0.000, 0.000, 1.000)",

    // Quad
    easeInQuad: "cubic-bezier(0.550, 0.085, 0.680, 0.530)",
    easeOutQuad: "cubic-bezier(0.250, 0.460, 0.450, 0.940)",
    easeInOutQuad: "cubic-bezier(0.455, 0.030, 0.515, 0.955)",

    // Quart
    easeInQuart: "cubic-bezier(0.895, 0.030, 0.685, 0.220)",
    easeOutQuart: "cubic-bezier(0.165, 0.840, 0.440, 1.000)",
    easeInOutQuart: "cubic-bezier(0.770, 0.000, 0.175, 1.000)",

    // Quint
    easeInQuint: "cubic-bezier(0.755, 0.050, 0.855, 0.060)",
    easeOutQuint: "cubic-bezier(0.230, 1.000, 0.320, 1.000)",
    easeInOutQuint: "cubic-bezier(0.860, 0.000, 0.070, 1.000)",

    // Sine
    easeInSine: "cubic-bezier(0.470, 0.000, 0.745, 0.715)",
    easeOutSine: "cubic-bezier(0.390, 0.575, 0.565, 1.000)",
    easeInOutSine: "cubic-bezier(0.445, 0.050, 0.550, 0.950)",

    // Back
    easeInBack: "cubic-bezier(0.600, -0.280, 0.735, 0.045)",
    easeOutBack: "cubic-bezier(0.175,  0.885, 0.320, 1.275)",
    easeInOutBack: "cubic-bezier(0.680, -0.550, 0.265, 1.550)"
  };