React [React-Spring] 中两个组件的渲染之间的转换答案

【问题标题】：Transitioning between the render of two components in React [React-Spring]React [React-Spring] 中两个组件的渲染之间的转换
【发布时间】：2019-11-02 11:01:10
【问题描述】：

我正在编写一个反应应用程序，它充当向导来指导用户输入表单信息。该应用程序有一个标题部分，它说明用户在哪个步骤上，以及一个内容部分，它根据当前步骤呈现一个组件。我正在使用样式化组件，而我现在唯一想做的就是拥有它，这样当组件切换（当前步骤状态发生变化）时，新组件会淡入而不是弹出。

我对 react 中的动画完全陌生，而且我看到的很多教程都只为屏幕上的某个元素设置动画，而不是渲染时的组件转换。我正在使用 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 会淡入，但它只是正常切换到它而没有任何动画。

作为参考，我正在尝试关注他们在 react-springs 上的 simple page transitions example site。

【问题讨论】：

标签： javascript node.js reactjs react-spring

【解决方案1】：

Transition 正在安装一个新元素，然后执行其进入动画，同时在执行离开动画后卸载任何旧元素。因此，当您想在过渡中使用两个以上的元素时，您必须将安装和卸载留给过渡（没有show && 内部过渡）。其次确保您定义了 key 属性，因为 transition 将使用 key 属性来决定哪个是新元素或旧元素（默认键是 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>

我把定位留给你。

【讨论】：