javascript - CSSTransition 不起作用。 V2 react 过渡组

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