Отдельная анимация на компоненте React без состояния - PullRequest
Новая
       45

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

0 голосов
/ 07 мая 2018

Я начал работать с реактивной позой, и у меня возник вопрос, касающийся большинства настроек анимации в 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'} установлено «до», что означает, что компонент FadeDiv имеет непрозрачность 0
  2. тогда второй рендер запускается при изменении состояния для установки pose = "enter", которая устанавливает непрозрачность на 1 и анимирует компонент от 0 до 1.

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

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

Ответы [ 2 ]

0 голосов
/ 06 декабря 2018

https://github.com/Popmotion/popmotion/issues/361#issuecomment-395037669

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

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

При закрытой исходной позе, Box оживит при монтаже.

Это пример Codesandbox:

https://codesandbox.io/s/n5y2v17rwl

0 голосов
/ 15 августа 2018

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

Одна важная вещь, которую вам не хватает, это свойство 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 строки дополнительного кода.

...