Skip to content

Instantly share code, notes, and snippets.

@jorgeortega
Created October 31, 2018 14:57
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save jorgeortega/21c73a1068b6a2a397187bd0fdb4f943 to your computer and use it in GitHub Desktop.
Save jorgeortega/21c73a1068b6a2a397187bd0fdb4f943 to your computer and use it in GitHub Desktop.
Minimal transition using React Transition and styled-components
import Transition from 'react-transition-group/Transition'
<Transition in={isVisible} timeout={200}>
{(state) => (
<StyledComponent transitionState={state} />
)}
</Transition>
const StyledComponent = styled.div`
transition: opacity 0.2s;
opacity: ${({ transitionState }) => (['entering', 'entered'].includes(transitionState)) ? '1' : '0'};
`
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment