Proposition of builtin CSS transition handlers with react-transition-group

Most of the time transitions are hard and messy to perform and maintain, Styled Components bring us a very easy API to handle styling. I was thinking of an idea to add transition helpers to the API levered by react-transition-group and make it even better.

import styled from 'styled-components-transition-group';

// transition() wraps TransitionGroup
const List = styled.div.transition() ``;

// animated() wraps CSSTransition
const ListItem = styled.div.animated() `
  transition: opacity 300ms cubic-bezier(0.4, 0.0, 0.2, 1) 0ms;

  &:appear, &:enter, &:exit {
    opacity: 0;
  }
  &:appear-active, &:enter-active {
    opacity: 1;
  }
`;

Access my example repository and launch storybook for a working demo of this proposition.

[gabiseabra]

If anyone’s still interested, I made styled-transition-group, which exports a new styled object as geelen proposed.

[granmoe]

I’m throwing my hat in the ring. I’ve used a slightly different, more minimal approach: https://github.com/granmoe/styled-animate