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.
yarn add styled-components react-transition-groupyarn 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.
Basic
To style a transition state use an &:{state}
selector. See react-transition-group's docs for available transition states (State names are hyphenated).
import transition from "styled-transition-group"; const Fade = transitiondiv` &: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; }`;
Attach transition props
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.
import transition from "styled-transition-group"; const Fade = transitiondiv` &: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; }`;
Transition Group
Styled transitions can be used with TransitionGroup
Selectors
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.
import styled from "styled-components";import transition css from "styled-transition-group"; const Fade = transitiondiv` /* ... */ `; const style = css` :enter & { color: green; } :exit & { color: red; }`; const Button = styleddiv` /* ... */`;