0

基本上我想用 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"/>

                     }

)
}
4

1 回答 1

1

您可以使用处理组件安装的高阶组件或包装器组件。

正如您可能已经猜到的那样，在安装后为组件设置动画不是问题，因为您通常可以在 componentDidMount 中访问它，但问题是如何在卸载时对其进行动画处理，因为之后不再呈现 html。

您可以尝试延迟卸载以使卸载动画完成。有一篇很好的文章，其中包含如何在此处执行此操作的示例（感谢 Tomasz Ferens 发布它！）。

如果你用这个高阶组件包装你的动画组件，你可以在你的动画组件中检查你的新道具 life-cicle hooks 'componentWillMount' 和 'componentDidUpdate' 来触发你的组件的动画：

  class YourAnimatedComponent extends Component {
    container = React.createRef();

    componentDidMount() {
      //component is mounting initally
      this.mount();
    }

    componentDidUpdate(prevProps, prevState) {
      //component is unmounting
      if (prevProps.isMounted && !this.props.isMounted) {
        this.unmount();
      }
      //component is mounting
      else if (!prevProps.isMounted && this.props.isMounted) {
        this.mount();
      }
    }

    mount = () => {
      //logic for animation in, e.g.:
      //TweenMax.to(this.container.current, .3, {css: {opacity: 1}});
    }

    unmount = () => {
      //logic for animation out e.g.:
      //TweenMax.to(this.container.current, .3, {css: {opacity: 0}});
    }
    ...
    render() {
      return(<div ref={this.container}>your content</div>);
    }
  }

我希望这能让你朝着正确的方向轻推。

于 2020-03-30T14:07:33.403 回答