Styled Transition Group


Inspired by issue #1036 of styled-components, this package exports a styled object for generating animations with react-transition-group's CSSTransition.

Getting Started

Add styled-transition-group and it's peer dependencies to your package:
styled-transition-group@1 is compatible with styled-components v2 - v3.
styled-transition-group@2 is compatible with styled-components v4.

``shell
yarn add styled-components react-transition-group
yarn add styled-transition-group
`

Usage

The transition object has the same interface as styled-component's styled object, except it wraps the target component in a CSSTransition component and passes down it's props.

$3

To style a transition state use an &:{state} selector. See react-transition-group's docs for available transition states (State names are hyphenated).

Live example on Stackblitz

`jsx
import transition from "styled-transition-group";

const Fade = transition.div
&:enter { opacity: 0.01; }
&:enter-active {
opacity: 1;
transition: opacity 1000ms ease-in;
}
&:exit { opacity: 1; }
&:exit-active {
opacity: 0.01;
transition: opacity 800ms ease-in;
}
;
`

$3

Styled component's attrs() method can be used to attach transition props to a component. Props unrelated to CSSTransition are passed to the child component.

Live example on Stackblitz

`jsx
import transition from "styled-transition-group";

const Fade = transition.div.attrs({
unmountOnExit: true,
timeout: 1000
})
&:enter { opacity: 0.01; }
&:enter-active {
opacity: 1;
transition: opacity 1000ms ease-in;
}
&:exit { opacity: 1; }
&:exit-active {
opacity: 0.01;
transition: opacity 800ms ease-in;
}
;
`

$3

Styled transitions can be used with TransitionGroup

Live example on Stackblitz

$3

Using styled-transition-group's css helper, selectors can target the transition it's included in (&) or other transition components. It replaces the selectors with the actual styled-transition-group component's class names.

_Warning:_ Nesting doesn't work here. & targets the top level component regardless of nesting.

`jsx
import styled from "styled-components";
import transition, { css } from "styled-transition-group";

const Fade = transition.div / ... / ;

const style = css
${Fade}:enter & {
color: green;
}
${Fade}:exit & {
color: red;
}
;

const Button = styled.div
${style} / ... /
;
``

Live example on Stackblitz