CSSTransition 不起作用。 V2 反应过渡组

Question

所以，我有一小部分代码正在尝试添加动画作为Tooltip Nodes 的包装器。但也许我做错了什么，因为在mount 期间我没有在屏幕上看到任何animation。

此外，它甚至不会在 onEnter 事件上触发 console.log。为什么？

谢谢。

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

编辑：

我的anim.scss 文件：

.tooltip-enter {
  opacity: 0;

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

.tooltip-exit {
  opacity: 1;

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

Answer 1

我认为您的问题隐藏在 css-transition-group 用法的构成下。正如@Dhaval 提到的，您需要一些操作来触发css 转换。所以，正如我所看到的，你试图在没有Hello 状态操作的情况下制作一些东西。

很可能，您试图在其他组件中使用这个包装在动画中的组件。如果是，我们需要在这个“其他”组件中设置 CSS 过渡组动画包装器，并由他包装我们的 Hello 组件。

见下文：

// ..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;

和

// ..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!

Answer 2

我已经尝试使用下面提到的演示代码，并且在此代码中，当您单击它时，它将记录控制台并触发。

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