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

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

在我的react App中，我有一个基于类的父组件 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>
        )
    }
}

每个组件项目在安装或重新安装后都具有动画效果。但是，如果动画消失（如果父组件Items无法渲染），最好的动画方法是什么？

解决方法

TLDR

据我所知，React中有onAnimationStart，onAnimationEnd

答案

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

您可以在unmountComponentAtNode()中使用findDOMNode()，react-dom

伪代码

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

ETC

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

如果您有任何好的解决方案。用评论打我！
这对于其他正在努力解决此问题的开发人员应该有所帮助

参考

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