Question

所以我在使用嵌套转换与ReactTransitionGroup一起工作时遇到了一些麻烦。我想要实现的是我有一个关闭时出现的画布菜单（工作正常）然后在这个关闭画布菜单中有一个部分列表，当点击时，应该淡出，与此部分相关的一些信息应该淡出in。此操作应该可切换以在部分和信息之间切换。我处于可以切换信息的位置，我可以看到动画的不同阶段（输入，进入，退出，退出），但它们是静态的，没有动画。几乎发生在4个不同的阶段。

这是我的代码：

const Fade = ({ children, ...props }) => (
  <TransitionGroup appear>
    <Transition appear in={props.visible} timeout={0}>
      {(state) => (
        <div>
          <div onClick={props.onPress} style={{
            ...wrapperStyle,
            ...transitionStyles.wrapper[state]
          }} />
          <div style={{
            ...innerStyle,
            ...transitionStyles.inner[state]
          }}>
            <TopSection>
              <H3 white>Support</H3>
              <Icons.FaClose className='closeIcon' onClick={props.toggleContent} size={20} />
            </TopSection>
            <Transition appear in={props.contentVisible} timeout={300}>
              {(state) => (
                <div style={{ ...sectionStyle, ...transitionStyles.sectionOpposite[state] }}>
                  { props.renderSections() }
                </div>
              )}
            </Transition>
            <Transition appear in={!props.contentVisible} timeout={300}>
              {(state) => (
                <div style={{ ...sectionStyle, ...transitionStyles.sectionOpposite[state] }}>
                  { props.article }
                </div>
              )}
            </Transition>
          </div>
        </div>
      )}
    </Transition>
  </TransitionGroup>
)

然后我在渲染上调用Fade组件：

render () {
    return (
      <Fade onPress={() => this._hideModal()}
        renderSections={this._renderSections}
        in={this.state.visible}
        article={this.state.activeArticle}
        contentVisible={this.state.contentVisible}
        toggleContent={() => this._toggleContent()} />
    )
  }

以下是在过渡的不同阶段调用的样式代码：

section: {
    entering: {
      opacity: 1,
      transform: 'translateY(0) scale(1)',
      visibility: 'visible'
    },
    entered: {
      opacity: 0,
      transform: 'translateY(50px) scale(0.9)',
      visibility: 'hidden'
    },
    exiting: {
      opacity: 0,
      transform: 'translateY(50px) scale(0.9)',
      visibility: 'hidden'
    },
    exited: {
      opacity: 1,
      transform: 'translateY(0) scale(1)',
      visibility: 'visible'
    }
  },
  sectionOpposite: {
    entering: {
      opacity: 0.5,
      transform: 'translateY(30px) scale(0.9)'
    },
    entered: {
      opacity: 1,
      transform: 'translateY(0) scale(1)'
    },
    exiting: {
      opacity: 0.5,
      transform: 'translateY(30px) scale(0.9)'
    },
    exited: {
      opacity: 0,
      transform: 'translateY(50px) scale(0.9)'
    }
  }

每个＆＃39; in＆＃39;不同转换的道具正在SetState帮助器方法中切换，这些方法按预期工作，当这些改变时没有动画！

嵌套转换如何与React Transition Group一起使用

0 个答案: