Question

无法让CSSTransitionGroup使用我的自定义组件。

以下是代码：

import {CSSTransitionGroup} from 'react-transition-group'

...

// in render():

  <CSSTransitionGroup
    transitionName='container'
    transitionEnterTimeout={500}
    transitionLeaveTimeout={300}
  >
    <MyComponent />
  </CSSTransitionGroup>

我看到CSSTransitionGroup已添加span我的组件，但没有类。 MyComponent render（）方法返回null或<div />（如果window.innerWidth < 960）。所以我可以看到内容消失并在窗口调整大小时显示，但没有来自CSSTransitionGroup的类。

请帮忙

Answer 1

CSSTransitionGroup在从组件树安装或卸载子组件时管理其子组件的动画。由于控制MyComponent内容的逻辑是该组件的，因此CSSTransitionGroup无法查看它并且不会对其进行管理，因为<MyComponent />已安装并保持挂载状态。

要使CSSTransitionGroup以您希望的方式工作，您需要将其放在MyComponent内，以便它管理您要设置动画的<div />，或者您需要直接挂载和卸载{ {1}}。

换句话说，您希望CSSTransitionGroup控制的元素/组件需要是CSSTransitionGroup组件的 direct children ，并在其中安装和卸载，否则它将无法工作。

Answer 2

也许 React-Anime-Manager 会更适合您

import {useAnimeManager} from '@perymimon/react-anime-manager'
import {useState} from "react";

function ShowHide() {
    const [show, setShow] = useState(true);
    const {item: flag, phase, done} = useAnimeManager(show, {oneAtATime: true});

    useEffect(_ => {
        setTimeout(_ => setShow(false) , 500)
    }, [show])


    /**-> because there is no element when flag == false. `done` must called expliclty to guide `useAnimeManager` continue with the states flow and show the `true` value when it arrive */
    if (!flag) done()

    return  flag && <MyComponent className="container" />
}

CSSTransitionGroup具有单个自定义组件

2 个答案: