Переход между рендером двух компонентов в React [React-Spring] - PullRequest
Новая
       14

Переход между рендером двух компонентов в React [React-Spring]

1 голос
/ 19 июня 2019

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

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

Это мой компонент приложения 


import { Transition } from 'react-spring/renderprops'
... // other imports 

export default class App extends Component {
  constructor(props) {
    super(props)
    this.state = {
      currentStep: 1,
      modelChosen: '',
      aqlQuery: ''
    }
    this.navigateForward = this.navigateForward.bind(this)
    this.navigateBack = this.navigateBack.bind(this)
  }

... //navigation functions..

render() {
    let show = true
    return (
      <StyledApp>
        <Content>
          <Header
            step={this.state.currentStep}
            navigateBack={this.navigateBack}
          />
          <Transition
            native
            reset
            items={show}
            unique
            from={{ opacity: 0, transform: 'translate3d(100%,0,0)' }}
            enter={{ opacity: 1, transform: 'translate3d(0%,0,0)' }}
            leave={{ opacity: 0, transform: 'translate3d(-50%,0,0)' }}
          >
            {show =>
              show &&
              (props => (
                <div styles={props}>
                  <ModelStep
                    currentStep={this.state.currentStep}
                    navigateForward={this.navigateForward}
                  />
                  <QueryStep currentStep={this.state.currentStep} />
                </div>
              ))
            }
          </Transition>
        </Content>
      </StyledApp>
    )
  }
}

Компоненты ModelStep и QueryStep отображаются только тогда, когда это их соответствующий шаг.

Например, это мой компонент QueryStep: 

import { animated } from 'react-spring/renderprops'
..// other imports
export default class QueryStep extends Component {
  render() {
    if (this.props.currentStep !== 2) {
      return null
    }
    return <StyledQuery />
  }
}

const StyledQuery = styled(animated.div)`
  width: 1250px;
  background-color: ${colors.backgroundLight};
  height: 320px;

Я ожидал, что когда ModelStep перейдет вперед и, таким образом, изменит состояние приложения currentStep, QueryStep исчезнет, ​​однако вместо этого простопереключается на него обычно без анимации.

Для справки я пытаюсь следовать примеру простых переходов страниц , который они имеют на реагирующих пружинах site .

1 Ответ

0 голосов
/ 20 июня 2019

Transition монтирует новые элементы, затем выполняет анимацию ввода, демонтируя все старые элементы после анимации их выхода. Поэтому, если вы хотите использовать более двух элементов в своей траектории, вы должны оставить монтирование и отключение перехода (без show && внутри перехода). Во-вторых, убедитесь, что вы определили право свойства ключа, потому что переход будет использовать свойство ключа, чтобы решить, какой элемент новый или старый (по умолчанию используется ключ item => item). В-третьих, вы должны использовать абсолютную позицию для страниц, потому что они как бы перекрываются, когда один входит, другой уходит. Как то так: 

      <Transition
        native
        reset
        items={this.state.currentStep}
        unique
        from={{ opacity: 0, transform: 'translate3d(100%,0,0)' }}
        enter={{ opacity: 1, transform: 'translate3d(0%,0,0)' }}
        leave={{ opacity: 0, transform: 'translate3d(-50%,0,0)' }}
      >
        {currStep =>
           (props => (
            <div styles={props}>
              <ModelStep
                currentStep={currStep}
                navigateForward={this.navigateForward}
              />
              <QueryStep currentStep={currStep} />
            </div>
          ))
        }
      </Transition>

Я оставляю вам позиционирование.

...