How to trigger React TransitionGroup and Transition to animate onLoad

Question

Given the React component below which uses React Transition Group, how can I get the Transition animation to render on component load?

import React from 'react'; import { TransitionGroup, Transition } from 'react-transition-group';

const FeatureItem3 = class extends React.Component {
  constructor() {
    super();
    this.state = {
      animate: true,
    };
  }
  render() {
    return (           
        <TransitionGroup>
          <Transition
            in={this.state.animate}
            timeout={0}
          >
            <div>xxx</div>
          </Transition>
          <Transition
            in={this.state.animate}
            timeout={1000}
          >
            <div>yyyy</div>
          </Transition>
          <Transition
            in={this.state.animate}
            timeout={2200}
          >
            <div>zzzz</div>
          </Transition>
        </TransitionGroup>
    );
  }
};

score 1 · Accepted Answer · answered Aug 21 '18 at 00:05

By default the Transition component does not alter the behavior of the component it renders, it only tracks "enter" and "exit" states for the components. It's up to you to give meaning and effect to those states.

https://reactcommunity.org/react-transition-group/transition

Example from their docs:

import Transition from 'react-transition-group/Transition';

const duration = 300;

const defaultStyle = {
  transition: `opacity ${duration}ms ease-in-out`,
  opacity: 0,
}

const transitionStyles = {
  entering: { opacity: 0 },
  entered:  { opacity: 1 },
};

const Fade = ({ in: inProp }) => (
  <Transition in={inProp} timeout={duration}>
    {(state) => (
      <div style={{
        ...defaultStyle,
        ...transitionStyles[state]
      }}>
        I'm a fade Transition!
      </div>
    )}
  </Transition>
);

score 0 · Answer 2 · answered Jan 28 '22 at 09:32

For those who are still wondering...

You will need to add appear attribute to the Transition/CSSTransition tag. Refer the documentation link:

http://reactcommunity.org/react-transition-group/transition#Transition-prop-appear.

You can also use key attribute on the same tags and update it on component mount. This will achieve same result but with more control than just mounting.

How to trigger React TransitionGroup and Transition to animate onLoad

2 Answers2