1

我想淡出一个元素并同时加入一个新元素。两个元素具有相同的父元素并占据相同的空间 - 一个正在替换另一个。我为此使用了 TransitionGroup 和 Transition。我遇到的问题是转换顺序执行 - 一个接一个。我希望它们同时运行。查看 DevTools 中的 Performance 选项卡，它们的进入和退出状态似乎同时触发。所以我怀疑这是对 CSS 转换如何工作的误解......但我想如果 TranstionGroup 根据指定的持续时间“调度”转换，我会从这里开始。以下是一些伪代码。一切都很好——除了我希望过渡并行运行。

const step1TransitionStyles = {
  entering: { opacity: 0 },
  entered: { opacity: 1 },
  exiting: { opacity: 0 }
};

const step2TransitionStyles = {
  entering: { transform: 'translateX(100%)' },
  entered: { transform: 'translateX(0)' },
  exiting: { transform: 'translateX(100%)' }
};

....

<div
  style={{
    position: 'fixed',
    top: 0,
    right: 0,
    height: 400,
    width: 400,
    zIndex: 10,
    backgroundColor: '#ccc'
  }}
>
  <TransitionGroup appear={true}>
    {this.state.step === 1 &&
      <Transition key='1' in={true} timeout={duration}>
        {(state) => (
          <div style={{
            transition: `opacity ${duration}ms ease-in-out`,
            opacity: 0,
            backgroundColor: '#8787d8',
            position: 'absolute',
            top: 0, left: 0,
            bottom: 0, right: 0,
            ...step1TransitionStyles[state]
          }}>
            Step #1
            <br />
            <button onClick={this.handleStep1Next}>Next</button>
          </div>
        )}
      </Transition>
    }
    {this.state.step === 2 &&
      <Transition key='2' in={true} timeout={duration}>
        {(state) => (
          <div style={{
            transition: `transform ${duration}ms ease-in-out`,
            backgroundColor: '#8787d8',
            position: 'absolute',
            top: 0, left: 0,
            bottom: 0, right: 0,
            ...step2TransitionStyles[state]
          }}>
            Step #2
            <br />
            <button onClick={this.handleStep2Back}>Back</button>
          </div>
        )}
      </Transition>
    }
  </TransitionGroup>
</div>
4

0 回答 0