Анимационный элемент при входе / выходе в реакции gsap - PullRequest
Новая
       61

Анимационный элемент при входе / выходе в реакции gsap

0 голосов
/ 30 марта 2020

В основном я хочу анимировать с помощью gsap в реагировать на вход / выход элемента, кажется, что нет способа сделать это без сложных хаков, я новичок в реакции анимаций и GSAP, может кто-нибудь помочь, по крайней мере, помочь мне где искать, в основном у меня есть элемент ввода и кнопка, когда кнопка нажата, вход должен плавно измениться sh, а затем отключиться в зависимости от состояния кнопки, мне нужна помощь во входе / выходе из элементов. Это мой код: 

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"/>

                     }

)
}

1 Ответ

1 голос
/ 30 марта 2020

Вы можете использовать Компонент высшего порядка или Компонент обертки, который управляет монтажом вашего Компонента.

Как вы уже догадались, анимация компонента после монтажа не является проблема, поскольку вы можете получить к нему доступ обычно в componentDidMount, но проблема заключается в том, как анимировать его, когда он отключается, поскольку html больше не отображается после этого.

Вы можете попытаться отложить отключение для размонтирование анимации до фини sh. Есть хорошая статья с примером того, как это сделать здесь (спасибо Томашу Ференсу за публикацию!).

Если вы оберните анимированные компоненты этим компонентом высшего порядка, вы Затем вы можете проверить ваши новые реквизиты в ваших анимационных компонентах ловушки жизненного цикла '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>);
    }
  }

Надеюсь, это даст вам толчок в правильном направлении.

...