1

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

我对 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站点上的简单页面转换示例。

4

1 回答 1

0

过渡是安装一个新元素，然后执行其进入动画，同时在执行离开动画后卸载任何旧元素。因此，当您想在过渡中使用两个以上的元素时，您必须将安装和卸载留给过渡（没有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>

我把定位留给你。

于 2019-06-20T11:48:28.007 回答