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

我试过下面提到的演示代码，在这段代码中，当你点击它时，它会用 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

Answer 2

我认为你的问题是隐藏在css-transition-group 的组合用法下。正如@Dhaval 所提到的，您需要执行一些操作来触发 css 转换。所以，正如我所见，你试图在没有 Hello 状态操纵的情况下做一些事情。

您可能正试图在其他组件中使用这个包裹在动画中的组件。如果是，我们需要在这个 "other" 组件中设置 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!

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

CSSTransition does not work. V2 react-transition-group

javascript

reactjs

reactcsstransitiongroup