3

所以我在让嵌套转换与 ReactTransitionGroup 一起工作时遇到了一些麻烦。我想要实现的是我有一个在单击时出现的画布外菜单（正在工作）然后在这个画布外菜单中有一个部分列表，单击时应该淡出，并且与该部分相关的一些信息应该淡出中。此操作应该可以切换以在部分和信息之间切换。我处于信息可切换的地步，我可以看到动画的不同阶段（进入、进入、退出、退出），但它们是静态的，没有动画。几乎发生在 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)'
    }
  }

不同转换的每个“in”道具都在 SetState 辅助方法中进行切换，这些方法按预期工作，只是在更改时没有动画！

4

0 回答 0