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

Question

我已经使用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>
    </>
  );
}

问题是下一张幻灯片在开始进入之前要等待上一张幻灯片退出。

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