react gsap中进入/退出时的动画元素

Question

[我基本上想在元素的进入/退出时使用gsap进行动画处理，如果没有复杂的技巧，似乎没有办法做到这一点，我是动画和GSAP的新手，有人可以帮忙至少帮助我在哪里看起来，基本上我有一个输入元素和一个按钮，当单击按钮时，输入应该平滑消失，然后根据按钮状态卸载，我需要输入/退出元素方面的帮助。这是我的代码：

class LoginBox extends React.Component {

     constructor(props) {
            super(props);
            this.myElement = null;

     }



     componentWillLeave(callback) {
         gsap.to(this.myElement, 6, {opacity: 0, onComplete: callback});
    }

    render(){
      return(
    <form>
                     {
                         this.props.loginButton.isSelected && <input ref={input => this.myElement = input}   type="text" placeholder="Enter email address"/>

                     }

)
}

Answer 1

您可以使用处理组件安装的Higher-Order-Component或包装器组件。