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 />);