javascript - 如何在 carousal 中设置过渡效果（react）

Question

我正在尝试使用材质 UI 在我的 React 应用程序中添加一个不错的过渡效果。我准备了这个轮播，我很难在其中为用户体验提供平滑的幻灯片效果。

<div>
  {this.state.images.length !== 0 &&
  <div>
    <div style={{ display: 'flex', justifyContent: 'center', margin: 5}}>
      <img src={`${this.state.host}${this.state.path}${this.state.images[this.state.currentImage]}`}  alt='nope' style={{ width: '100%', height: '300px', position: 'absolute' }} />
      <div style={{ display: 'flex', justifyContent: 'space-between', width: '100%', height: '300px',alignItems:'center' }}>
        <IconButton onClick={this.prevSlide.bind(this)}><ChevronLeft color="inherit"/></IconButton>
        <IconButton onClick={this.nextSlide.bind(this)}><ChevronRight color="inherit" /></IconButton>
      </div>
    </div>
  </div>}
</div>

标签： javascriptreactjsbabeljs