Question

因此，我只有一小段代码试图添加动画作为Tooltip Nodes的包装。但是也许我做错了，因为在屏幕上看不到animation期间出现的任何mount。

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

谢谢。

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 Transition Group动画包装器，并由他包装我们的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

CSSTransition不起作用。 V2 react-transition-group

2 个答案: