如何在更新内容反应时添加淡入淡出过渡

Question

我正在尝试创建带有 React 的滑块。我有一系列幻灯片。我正在使用 useState 存储活动幻灯片，然后使用 useEffect 每 3 秒更新一次。

const [activeSlide, setActiveSlide] = useState(slides[2]);
        
useEffect(() => {
  setTimeout(() => {
    setActiveSlide((prevState) => slides[prevState.next]);
  }, 5000);
}, [activeSlide]);

像这样在 jsx 中使用活动幻灯片：

<h4 className='font-medium text-gray-600 dark:text-gray-200'>{activeSlide.desc}</h4>

我不确定如何在幻灯片更新时添加淡入淡出效果。有什么建议吗？

Answer 1

如果您正在提高 CSS 技能，请不要考虑我的建议。否则，您可以使用 react-slick 中的 Crousel。

有一个例子，代码取自material-kit-react:

导入 react-slick:

import Carousel from "react-slick";

用 autoplay:true 和 fade:true 定义 settings:

  const settings = {
    dots: true,
    infinite: true,
    speed: 500,
    slidesToShow: 1,
    slidesToScroll: 1,
    autoplay: true,
    fade: true
  };

material-kit-react中的return函数：

 return (
    <div className={classes.section}>
      <div className={classes.container}>
        <GridContainer>
          <GridItem xs={12} sm={12} md={8} className={classes.marginAuto}>
            <Card carousel>
              <Carousel {...settings}>
                <div>
                  <img src={image1} alt="First slide" className="slick-image" />
                  <div className="slick-caption">
                    <h4>
                      <LocationOn className="slick-icons" />
                      Yellowstone National Park, United States
                    </h4>
                  </div>
                </div>
                <div>
                  <img
                    src={image2}
                    alt="Second slide"
                    className="slick-image"
                  />
                  <div className="slick-caption">
                    <h4>
                      <LocationOn className="slick-icons" />
                      Somewhere Beyond, United States
                    </h4>
                  </div>
                </div>
                <div>
                  <img src={image3} alt="Third slide" className="slick-image" />
                  <div className="slick-caption">
                    <h4>
                      <LocationOn className="slick-icons" />
                      Yellowstone National Park, United States
                    </h4>
                  </div>
                </div>
              </Carousel>
            </Card>
          </GridItem>
        </GridContainer>
      </div>
    </div>
  );

只需更改并准备就绪。希望对您有所帮助并节省您的时间。

如何在更新内容反应时添加淡入淡出过渡

How to add a fade transition while updating the content react

css

css-transitions

reactjs

tailwind-css