Material UI 文本随 useEffect 和 setInterval 淡入淡出

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;

Material UI 文本随 useEffect 和 setInterval 淡入淡出

MaterialUI text fade with useEffect and setInterval

javascript

fade

setinterval

reactjs

material-ui