CSSTransition does not work. V2 react-transition-group

Question

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;
  }
}

score 2 · Accepted Answer · answered Dec 19 '18 at 20:58

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!

Yes! Thank you, you are right, I understand this not so far ago too. — Max Travis, Dec 19 '18 at 21:00

score 0 · Answer 2 · answered Dec 18 '18 at 09:03

I have tried with the demo code mentioned below and in this code when you click on it, it will log the console with fired.

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

class Hello extends Component {
    constructor() {
        super();
        this.state = {
            isAnimation: false,
        };
    }
    render() {
        return (
            <>
                <CSSTransition
                    in={this.state.isAnimation}
                    classNames={'tooltip'}
                    timeout={300}
                    onEnter={() => {
                        console.log('FIRED!');
                    }}
                >
                    <div className="star">⭐</div>
                </CSSTransition>
                <button
                    onClick={() => {
                        this.setState({ isAnimation: true });
                    }}
                >
                    Click
                </button>
            </>
        );
    }
}
export default Hello;

Demo

Hi. This is the demo from Official site. It works, I know, but not for my case. — Max Travis, Dec 18 '18 at 09:13
@MaxTravis: as per my observation you have to do some action and make in true based on the action in CSSTransition, if you directly give it to in={true} not works, that's my observation — Dhaval Patel, Dec 18 '18 at 09:25

CSSTransition does not work. V2 react-transition-group

2 Answers2