CSSTransition does not work. V2 react-transition-group

So, I have a tiny part of code where I'm trying to add an animation as wrapper for Tooltip Nodes. But perhaps I do something wrong, because I do not see on the screen any animation appearing during mount.

Moreover, it even does not fire console.log on onEnter event. Why?

Thanks.

import React, { PureComponent } from 'react'
import { CSSTransition } from 'react-transition-group'

import styles from './index.scss'
import './anim.scss'

class ToolTip extends PureComponent {
  render() {
    return (
        <CSSTransition
          in={true}
          classNames={'tooltip'}
          timeout={3000}
          onEnter={() => { console.log('FIRED!') }}
        >
          <div className={`${styles.tooltipContainer}`}>
            <span className={styles.title}>{'title'}</span>
          </div>
        </CSSTransition>
    )
  }
}

export default ToolTip

Edit:

my anim.scss file:

.tooltip-enter {
  opacity: 0;

  &.tooltip-enter-active {
    opacity: 1;
  }
}

.tooltip-exit {
  opacity: 1;

  &.tooltip-exit-active {
    opacity: 0;
  }
}

I think your problem is hiding under the composition of css-transition-group usage. As mentioned by @Dhaval you need a some action to trigger the css transition. So, as I see, you trying to make something without Hello state manipulation.

Probably, you trying to use this Component wrapped in animation inside some other Component. If yes, we need to set CSS Transition Group animation wrapper inside this "other" Component and by him wrap our Hello Component.

See below:

// ..some Wrapper Component where we need to use our Hello Component
import React, { Component } from 'react';
import Hello from '../someWhere'
import { CSSTransition } from 'react-transition-group';
import './anim.scss'

class SomeComponent extends Component {
    constructor() {
        super();
        this.state = {
            isAnimation: false,
        };
    }
    render() {
        return (
            <>
                <CSSTransition
                    in={this.state.isAnimation}
                    classNames={'tooltip'}
                    timeout={300}
                    onEnter={() => {
                        console.log('FIRED!');
                    }}
                >
                    <Hello />
                </CSSTransition>
            </>
        );
    }
}
export default SomeComponent;

and

// ..our updated Hello Component

import React, { PureComponent } from 'react'

import styles from './index.scss'

class Hello extends PureComponent {
  render() {
    return (
       <div className={`${styles.tooltipContainer}`}>
          <span className={styles.title}>{'title'}</span>
       </div>
    )
  }
}

export default Hello

This is should help you!