Отдельная анимация на компоненте React без состояния

Question

Я начал работать с реактивной позой, и у меня возник вопрос, касающийся большинства настроек анимации в React.

1. Казалось бы, вы не можете запустить анимацию на компоненте при первом рендере?

Вот почему я задаю вышеуказанные вопросы. Ниже приведен пример реактивной позы с попыткой использовать компонент без состояния. Я ожидаю, когда я добавлю это в свой main.js рендеринг, как это. было бы

1. первый компонент монтирования FadeDiv с параметром initialPose равным 0

2. затем установите Pose="Enter" на рендере, который установлен на непрозрачность: 1. Но это не так. Теперь это было бы хорошо и просто, если бы это было так.

   import React from 'react';
   import posed from 'react-pose';
   
   const FadeDiv = posed.div({
     enter: { opacity: 1 },
     before: { opacity: 0 },
     initialPose: 'before'
   });
   
   export const Wrapper = () => (
    <FadeDiv pose="enter">
      <div>This is a fading div</div>
    </FadeDiv>
   ); 
   

Поправь меня, если я ошибаюсь, но я верю, что это происходит. Когда React монтирует компонент без состояния или любой другой компонент, он не имеет представления о initialPose до тех пор, пока он полностью не смонтирован на этом этапе, это слишком поздно, и он просто устанавливает непрозрачность компонента в позу ="enter", поэтому я не вижу анимацию с 0 - 1, потому что он смонтирован с непрозрачностью, установленной на "enter", что является непрозрачностью 1. Так что он просто появляется без анимации.

Итак, если вышеприведенное верно, то я добавил ниже эту настройку, которая является дополнительным образцом добавления состояния, но я думаю, что это необходимо для React.

import React, { Component } from 'react';
import posed from 'react-pose';

const FadeDiv = posed.div({
  enter: { opacity: 1 },
  before: { opacity: 0 },
  initialPose: 'before'
});

class Wrapper extends Component {
  constructor(props) {
    super(props);
    this.state = {
      isEnter: false
    };
  }

  componentDidMount() {
    this.setState({
      isEnter: true
    });
  }

  render() {
    return (
      <FadeDiv pose={this.state.isEnter ? 'enter' : 'before'}>
        <div>This is a fading div</div>
      </FadeDiv>
    );
  }
}

export default Wrapper;

Теперь все это работает, но мне нужно заставить второй рендеринг переключаться между isEnter, который имеет значение false при первом рендеринге (компонент монтирования) и затем устанавливается в значение true, когда компонент монтировал хук.

Извините за длинное многословное объяснение, но для меня важно полностью понять. Является ли это дополнительное количество шаблона единственным решением, позволяющим получить простое разделение? Первый компонент обтекания с хуком жизненного цикла componentDidMount для запуска второго рендера с использованием состояния. Я полагаю, что то, что происходит с ней, для меня и того, что другие могут понять, это:

1. исходный рендер поза ={this.state.isEnter? 'enter': 'before'} имеет значение "before", что означает, что компонент FadeDiv имеет непрозрачность 0
2. затем второй рендеринг запускается при изменении состояния для установки pose="enter", которая устанавливает непрозрачность в 1 и анимирует компонент от 0 до 1.

Это было бы правильным предположением?

Имея это в виду, это то, как люди на самом деле обходят анимацию в React с помощью дополнительного шаблона каждый раз, когда вам нужна простая анимация. Да, я понимаю, что вы могли бы использовать css, но вам все еще нужно подождать, пока компонент смонтируется, чтобы установить первый стиль на opacity=0, а затем повторно выполнить рендеринг для установки opacity=1. Но вопрос здесь о React-pose от Popmotion, и я думаю, Реагируйте на себя и свои подводные камни при использовании анимации элементов DOM.

Answer 1

https://github.com/Popmotion/popmotion/issues/361

Вы должны проверить это.

<Box
  style={styles}
  initialPose="closed"
  pose="open"
/>

С закрытой начальной позой, Box оживит при монтаже.

Это пример Codesandbox:

https://codesandbox.io/s/n5y2v17rwl

Answer 2

Я работал с реагирующей пружиной, которая, глядя на документы, очень похожа на реагирующую позу.

Одна важная вещь, которую вам не хватает, это свойство transition, которое очень хорошо работает со свойством opacity.

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

class App extends Component {
  constructor() {
    super()
    this.state ={
      opacity: 0
    }
  }
 componentDidMount() {
   this.handleTransition()
 }

 handleTransition = () => (
   setTimeout(() => this.setState({opacity: 1}), 400 )
 )

 render() {
  return (
    <div className="App">
      <div style={{opacity: this.state.opacity, transition: "opacity 3s ease"}}>
      <h1>Faded Div </h1>
      </div>
    </div>
  );
 }
}

https://codesandbox.io/s/6v6l7xo4zz

В настоящее время я считаю, что установка непрозрачности в состоянии является одним из единственных способов обработки переходов. Это не так уж плохо, это всего лишь 2-3 строки дополнительного кода.