Skip to content
No description, website, or topics provided.
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
src Fix extend method recursion, closes #6 Feb 21, 2018
test Add #6 tests Feb 20, 2018
.babelrc
.editorconfig
.eslintrc Initial commit Dec 14, 2017
.gitignore Added rollup build Jan 24, 2018
.npmignore Added npmignore Dec 15, 2017
README.md
package.json
rollup.config.js
yarn.lock Fix extend method recursion, closes #6 Feb 21, 2018

README.md

Styled Transition Group

npm version

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:

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.

Basic

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

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;
  }
`

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.

Live example on Stackblitz

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;
  }
`

Transition Group

Styled transitions can be used with TransitionGroup

Live example on Stackblitz

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 = transition.div` /* ... */ `

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

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

Live example on Stackblitz

You can’t perform that action at this time.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session.