Question

我希望淡出一个元素并同时支持一个新元素。两个元素具有相同的父元素并占据相同的空间 - 一个元素正在替换另一个元素。我正在使用TransitionGroup和Transition。我遇到的问题是转换按顺序执行 - 一个接一个。我希望它们同时运行。查看DevTools中的Performance选项卡，它们显示为已输入＆amp;退出的州同时开火。所以我怀疑这是对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>

ReactTransitionGroup同时转换

0 个答案: