Question

我正在编写一个反应应用程序，该应用程序充当向导来指导用户输入表单信息。该应用程序具有一个标头部分，该标头部分声明用户所处的步骤，以及一个内容部分，该内容部分基于当前步骤来呈现组件。我正在使用样式化的组件，而我现在唯一要做的就是拥有它，因此当组件切换（当前步骤状态更改）时，新组件就会淡入，而不仅仅是弹出。

我对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上的site。

Answer 1

过渡会先安装一个新元素，然后执行它们的enter动画，同时在离开它们的动画之后卸载所有旧元素。因此，当您要在转换中使用两个以上的元素时，必须将安装和卸载留在转换中（转换中没有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>

我将定位留给您。

在React [React-Spring]中两个组件的渲染之间的过渡

1 个答案: