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

Question

我正在编写一个 react 应用程序，它充当向导来指导用户输入表单信息。该应用程序有一个 header 部分，用于说明用户所在的步骤，以及一个内容部分，用于根据当前步骤呈现组件。我正在使用样式化组件，我现在唯一想做的就是拥有它，这样当组件切换(当前步骤状态更改)时，新组件就会淡入而不是仅仅弹出。

我对 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 会淡入，但它只是正常切换到它，没有任何动画。

作为引用，我正在尝试遵循 simple page transitions example他们有反应 Spring site .

Answer 1

过渡正在安装一个新元素，然后执行其进入动画，同时在执行其离开动画后卸载任何旧元素。因此，当您想在转换中使用两个以上元素时，您必须将安装和卸载留给转换(转换内没有 show && )。其次，确保正确定义了 key 属性，因为转换将使用 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>

定位就交给你了。