useTransition

Hook used to animate the appearance or the disappearance of a component.

Usage

useTransition generates data-* props which you can use as selectors in CSS. It will also ensure that the element will only get hidden when the transition has ended.

Use the [data-enter] and [data-leave] selectors to style both enter and leave animations. data-enter is added shortly after the element is shown so there's an interval for the browser to process the initial styles and understand this as a transition.

This example is voluntarily simple and don't use Reakit Disclosure. For production ready code, it should use it.

import { styled } from "@xstyled/styled-components";
import { useState } from "react";
import { useTransition } from "swash/motion/Transition";

const Content = styled.div`
  opacity: 0;
  transition: opacity ease 250ms;

  &[data-enter] {
    opacity: 1;
  }

  &[data-leave] {
    transition: opacity ease 300ms;
  }
`;

function Example() {
  const [visible, setVisible] = useState(false);
  const animated = useTransition(visible);
  return (
    <>
      <button type="button" onClick={() => setVisible((visible) => !visible)}>
        Toggle
      </button>
      <Content {...animated}>Content</Content>
    </>
  );
}

render(<Example />);