如何在 ReactJS 中为组件的消失设置动画？

Question

在我的 React 应用程序中，我有一个基于 class 的父组件 Items。在它里面渲染子组件 Item.

export class Items extends Component {
    render() {
        return (
            <Fragment>
                <Filters />
                <div className="container__main">
                     this.props.items.map((item) => (
                          <Item key={item.id} item={item} />
                     ))
                </div>
            </Fragment>
        );
    }
}

和项目

export class Item extends Component {

    cmb = React.createRef();

    componentDidMount() {
        if (this.cmb.current !== null) {
            setTimeout(() => { 
                this.cmb.current.style.transform = "scaleY(1) translateZ(0)"; 
                this.cmb.current.style.transition = "all 0.5s ease-in-out"; });
        } else return;
    }

    render() {
        return (
            <div ref={this.cmb} className="someClass">
                // some code
            </div>
        )
    }
}

每个组件 Item 在安装或重新安装后都是动画的。但是当它消失时（如果父组件 Items 不渲染它）最好的动画方式是什么？

Answer 1

TLDR

As far as I know there is onAnimationStart, onAnimationEnd in React

回答

您可以使用 onAnimationStart、onAnimationEnd 合成事件侦听器和一些道具，例如 isShowComponent、isHideComponent

并且您可以在 react-dom

中使用 unmountComponentAtNode()、findDOMNode()

伪代码

   handleAnimationEnd() {
     const node = ReactDom.findDOMNode(this);
     ReactDom.unmountComponentAtNode(node)
   }
   ...
   render(){
     return (
        <div onAnimtionEnd={this.handleAnimationEnd}>
        /** some code**/
        </div>
     )
   }

等

这不是真正的代码，而是伪代码！但我认为您可以使用此 api 和事件处理程序来做到这一点！
祝你好运！

If you have any good solution. just hit me with comment!
It should be helpful to other developer struggling with this issue

参考

1. React Document
2. React Dom Document
3. code sandbox exmaple
4. How to Trigger Animation Events using React