Question

我正在使用MaterialUI的Fade组件来模拟文本轮播，该轮播根据在称为dataArray的道具中提供的数组进出。我正在使用setIntervals来不断切换Fade的布尔值并更改数组信息。主要问题是文本在第一次淡入淡出之后会在过渡过程中切换。我试图实现的是在文本隐藏时根据提供的数组进行平滑的淡入淡出过渡和信息切换循环。我尝试使用异步，但在setIntevals上似乎不起作用。

这是我的组成部分：

import React, { useEffect } from 'react';
import { makeStyles } from '@material-ui/core/styles';
import { Paper, Fade } from '@material-ui/core';
import './FadeCarousel.css';

const useStyles = makeStyles((theme) => ({
  root: {
    backgroundColor: 'black',
  },
  paper: {
    margin: theme.spacing(1),
    backgroundColor: 'rgba(0,0,0,0)',
    color: '#f4dfc0',
    padding: '1vw 0vw 1vw 0vw',
    fontFamily: 'Chenier',
    fontSize: '2vw',
  },
}));

const FadeCarousel = ({ dataArray }) => {
  const classes = useStyles();
  const [checked, setChecked] = React.useState(true);
  const [carouselData, setCarousel] = React.useState(dataArray[0]);

  useEffect(() => {
    var count = 0;
    // Interval Fade
    setInterval(() => {
      setChecked((prev) => !prev);
    }, 5000);
    // Interval Change Data
    setInterval(() => {
      if (count == dataArray.length - 1) {
        count = 0;
      } else count++;
      setCarousel(dataArray[count]);
    }, 8000);
  }, []);

  return (
    <div className={classes.root}>
      <Fade
        in={checked}
        timeout={{
          enter: 3000,
          exit: 3000,
        }}
      >
        <Paper elevation={4} className={classes.paper}>
          {carouselData}
        </Paper>
      </Fade>
    </div>
  );
};

export default FadeCarousel;

Answer 1

在Fade经过其exit周期之后，您的计数应发生变化，以使其在淡入“黑暗”阶段时发生变化。

这意味着您的时间安排应如下：

intervalFade = X

intervalChangeData = 2*X

淡出timeout = {enter: 2*X, exit: 2*X}

示例here

代码结果：

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

const useStyles = makeStyles((theme) => ({
  root: {
    backgroundColor: 'black',
  },
  paper: {
    margin: theme.spacing(1),
    backgroundColor: 'rgba(0,0,0,0)',
    color: '#f4dfc0',
    padding: '1vw 0vw 1vw 0vw',
    fontFamily: 'Chenier',
    fontSize: '2vw',
  },
}));

const FadeCarousel = ({ dataArray }) => {
  const classes = useStyles();
  const [checked, setChecked] = React.useState(true);
  const [carouselData, setCarousel] = React.useState(dataArray[0]);

  const fadeTime = 1000

  useEffect(() => {
    var count = 0;
    // Interval Fade
    setInterval(() => {
      setChecked((prev) => !prev);
    }, fadeTime);
    // Interval Change Data
    setInterval(() => {
      if (count == dataArray.length - 1) {
        count = 0;
      } else count++;
      setCarousel(dataArray[count]);
    }, fadeTime*2);
  }, []);

  return (
    <div className={classes.root}>
      <Fade
        in={checked}
        timeout={{
          enter: fadeTime*2,
          exit: fadeTime*2,
        }}
      >
        <Paper elevation={4} className={classes.paper}>
          {carouselData}
        </Paper>
      </Fade>
    </div>
  );
};

export default FadeCarousel;

MaterialUI文本使用useEffect和setInterval淡入

1 个答案: