Styled Transition Group Animation

Generate animation width styled-components and react-transition-group's CSSTransition

For more information about the angular-translate project, please visit our website.

Install

npm install styled-transition-group-animation -S

Usage

<TransitionGroup>
    {this.props.items.map((item) => (
        <Transition key={item} type="fade" duration={1000}>
    
          <div>
            <h6>{item}</h6>
          </div>
    
        </Transition>
    ))}
</TransitionGroup>

Storybook

https://sanderv1992.github.io/Styled-Transition-Group/public/storybook/

API (props)

type

• Type: String
• Default: fade
• Available types: fade, zoom, rotate, roll

duration

• Type: Number
• Default: 1000

animation

• Type: Any
• Default: null

Add more animation types (you can add more animations manually):

Transform

const animation = {
  enter: {
    from: 'scale3d(0.3, 0.3, 0.3)',
    to: 'scale3d(2, 2, 2)',
  },
  exit: {
    from: 'initial',
    to: 'scale3d(0.3, 0.3, 0.3)',
  },
}

<TransitionGroup>
    {this.props.items.map((item) => (
        <Transition key={item} type="bounce" animation={animation} duration={1000}>

          <div>
            <h6>{item}</h6>
          </div>

        </Transition>
    ))}
</TransitionGroup>

Keyframes

const animation = {
  keyframes: `
      @keyframes bounceInDown {
        from, 60%, 75%, 90%, to {
          animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
        }

        0% {
          opacity: 0;
          transform: translate3d(0, -3000px, 0);
        }

        60% {
          opacity: 1;
          transform: translate3d(0, 25px, 0);
        }

        75% {
          transform: translate3d(0, -10px, 0);
        }

        90% {
          transform: translate3d(0, 5px, 0);
        }

        to {
          transform: translate3d(0, 0, 0);
        }
      }

      @keyframes bounceOutDown {
        20% {
          transform: translate3d(0, 10px, 0);
        }

        40%, 45% {
          opacity: 1;
          transform: translate3d(0, -20px, 0);
        }

        to {
          opacity: 0;
          transform: translate3d(0, 2000px, 0);
        }
      }
    `,
  enter: 'bounceInDown',
  exit: 'bounceOutDown',
}

<TransitionGroup>
    {this.props.items.map((item) => (
        <Transition key={item} type="bounce" animation={animation} duration={1000}>

          <div>
            <h6>{item}</h6>
          </div>

        </Transition>
    ))}
</TransitionGroup>