如何在幻灯片更改时消除 react-material-ui-carousel 中的延迟

如何解决如何在幻灯片更改时消除 react-material-ui-carousel 中的延迟

我使用 react-material-ui-carousel 实现了轮播。下面是 DEMO

import React from 'react';
import { makeStyles } from '@material-ui/core/styles';

import Carousel from 'react-material-ui-carousel';

const useStyles = makeStyles(theme => ({
  root: {
    height: '300px',width: '100%',background: 'black',color: 'white',textAlign: 'center',lineHeight: '300px',fontSize: '5rem'
  },table: {
    minWidth: 650
  }
}));

export default function Hello() {
  const classes = useStyles();
  return (
    <>
      <Carousel animation="slide">
        <div className={classes.root}>Item 1</div>
        <div className={classes.root}>Item 2</div>
        <div className={classes.root}>Item 3</div>
        <div className={classes.root}>Item 4</div>
      </Carousel>
    </>
  );
}

问题是下一张幻灯片要等到上一张幻灯片退出才开始进入。

如何确保幻灯片的离开和进入事件同时发生？如何删除每个过渡之间的“白色”背景？