如何在幻灯片更改时消除 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>
    </>
  );
}

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

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

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）