1

在我的反应应用程序中，我有一个基于类的父组件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 没有渲染它），最好的动画方法是什么？

4

1 回答 1

2

TLDR

据我所知onAnimationStart，onAnimationEnd在 React

回答

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

你可以使用unmountComponentAtNode(),findDOMNode()在react-dom

伪代码

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

ETC

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

如果你有什么好的解决办法。只是用评论打我！
它应该对其他解决此问题的开发人员有所帮助

参考

  1. 反应文档
  2. 反应 Dom 文档
  3. 代码沙箱示例
  4. 如何使用 React 触发动画事件
于 2020-08-11T15:01:49.000 回答