CODEWITHSUNDEEP
reactjsanimationtransitionreact-transition-groupreact-animated
ilyo
ilyo

Reputation: 36411

Giving React component animation on mount

I am trying to make this component move in when mounted but getting

Cannot read property 'enter' of undefined

Here is a simplified code (I have all the CSS classes ready):

class Example extends React.Component {
  state = {
    transitionIn: false,
  };

  componentDidMount = () => {
    this.setState({ transitionIn: true })
  }

  render() {
    return (
      <CSSTransition
        in={this.state.transitionIn}
        timeout={1000}
        className={'wordTransition'}
      >
        <div>dksjfnsdkjnfj</div>
      </CSSTransition>
    );
  }
}

https://codesandbox.io/s/rj5046zxoo

Upvotes: 1

Views: 1698

Answers (1)

flyingace
flyingace

Reputation: 1887

I believe that the error you were experiencing is one that you solved in the codesandbox.io link you provided above. I was having this same problem. Instead of naming the prop that takes a class name to be used as the prefix for the various transition states classNames (plural) I was using the more familiar className (singular).

To reiterate: inside the <CSSTransition> component, make sure you are using a classNames prop and not className as you would inside of a react component's html elements.

I feel that the choice on the part of the React Transition Group to use a prop called classNames in their component is confusing and should perhaps be reconsidered.

Upvotes: 1

Related Questions