css - 如何在更新内容时添加淡入淡出

问题描述

我正在尝试创建一个带有反应的滑块。我有一系列幻灯片。我useState用来存储活动幻灯片，然后每 3 秒用useEffect.

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>

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

标签： cssreactjscss-transitionstailwind-css

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

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

导入react-slick：

import Carousel from "react-slick";

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

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

中的return函数material-kit-react：

 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>
  );

css - 如何在更新内容时添加淡入淡出

问题描述

解决方案

推荐阅读