React-анимация монтирования и размонтирования одного компонента

используя знания, полученные из ответа Пранеша, я придумал альтернативное решение, которое настраивается и используется повторно:

const AnimatedMount = ({ unmountedStyle, mountedStyle }) => {
  return (Wrapped) => class extends Component {
    constructor(props) {
      super(props);
      this.state = {
        style: unmountedStyle,
      };
    }

    componentWillEnter(callback) {
      this.onTransitionEnd = callback;
      setTimeout(() => {
        this.setState({
          style: mountedStyle,
        });
      }, 20);
    }

    componentWillLeave(callback) {
      this.onTransitionEnd = callback;
      this.setState({
        style: unmountedStyle,
      });
    }

    render() {
      return <div
        style={this.state.style}
        onTransitionEnd={this.onTransitionEnd}
      >
        <Wrapped { ...this.props } />
      </div>
    }
  }
};

использование:

import React, { PureComponent } from 'react';

class Thing extends PureComponent {
  render() {
    return <div>
      Test!
    </div>
  }
}

export default AnimatedMount({
  unmountedStyle: {
    opacity: 0,
    transform: 'translate3d(-100px, 0, 0)',
    transition: 'opacity 250ms ease-out, transform 250ms ease-out',
  },
  mountedStyle: {
    opacity: 1,
    transform: 'translate3d(0, 0, 0)',
    transition: 'opacity 1.5s ease-out, transform 1.5s ease-out',
  },
})(Thing);

и, наконец, в другом компонента render способ:

return <div>
  <ReactTransitionGroup>
    <Thing />
  </ReactTransitionGroup>
</div>

я поднял эту проблему во время моей работы, и просто, как казалось, это действительно не реагируют. В обычном сценарии, где вы визуализируете что-то вроде:

this.state.show ? {childen} : null;

as this.state.show изменения дети монтируются / размонтируются сразу же.

один подход я взял это создание компонента фантик Animate и использовать его как

<Animate show={this.state.show}>
  {childen}
</Animate>

теперь this.state.show изменения, мы можем воспринимать изменения опоры с getDerivedStateFromProps(componentWillReceiveProps) и создать промежуточные этапы рендеринга для выполнения анимации.

начнем с Статический Этап когда дети установлены или unmounted.

как только мы обнаружить show флаг меняется, вводим Подготовительный Этап где мы вычисляем необходимые свойства, такие как height и width С ReactDOM.findDOMNode.getBoundingClientRect().

В конце перехода, мы используем onTransitionEnd API, чтобы вернуться к Static этап.

есть гораздо больше деталей, как этапы передачи плавно, но это может быть общая идея:)

если кто-то заинтересован, я создал библиотеку React https://github.com/MingruiZhang/react-animate-mount поделиться своим решением. Любая обратная связь добро пожаловать:)

Что делать, если onMount вы добавляете другое имя класса, в котором есть переход, и onUnMount вы удаляете это имя класса?

для тех, кто рассматривает react-motion, анимация одного компонента, когда он монтируется и размонтируется, может быть подавляющей для настройки.

есть библиотека под названием react-motion-ui-pack что делает этот процесс намного проще для начала. Это обертка вокруг react-motion, что означает, что вы получаете все преимущества от библиотеки (т. е. вы можете прерывать анимацию, иметь несколько размонтированных одновременно).

использование:

import Transition from 'react-motion-ui-pack'

<Transition
  enter={{ opacity: 1, translateX: 0 }}
  leave={{ opacity: 0, translateX: -100 }}
  component={false}
>
  { this.state.show &&
      <div key="hello">
        Hello
      </div>
  }
</Transition>

Enter определяет конечное состояние компонента; leave-это стиль, применяемый при размонтировании компонента.

вы можете обнаружить, что после того, как вы использовали пакет пользовательского интерфейса пару раз, библиотека react-motion может быть не такой сложной.

Анимация переходов ввода и выхода намного проще с react-move.

пример на codesandbox