如何在更新内容时添加淡入淡出答案

【问题标题】：How to add a fade transition while updating the content react如何在更新内容时添加淡入淡出
【发布时间】：2021-10-03 06:45:10
【问题描述】：

我正在尝试创建一个带有反应的滑块。我有一系列幻灯片。我使用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>

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

【问题讨论】：

标签： css reactjs css-transitions tailwind-css

【解决方案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>
  );

只需更改它即可开始使用。希望对您有所帮助并节省您的时间。

【讨论】：

我正在尝试使用自定义 css 或顺风来做到这一点。但是，谢谢你的时间:)