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

Posted 2023-03-06

【中文标题】如何在更新内容时添加淡入淡出

【英文标题】：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>

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

【参考方案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  className="slick-image" />
                  <div className="slick-caption">
                    <h4>
                      <LocationOn className="slick-icons" />
                      Yellowstone National Park, United States
                    </h4>
                  </div>
                </div>
                <div>
                  <img
                    src=image2
                    
                    className="slick-image"
                  />
                  <div className="slick-caption">
                    <h4>
                      <LocationOn className="slick-icons" />
                      Somewhere Beyond, United States
                    </h4>
                  </div>
                </div>
                <div>
                  <img src=image3  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 或顺风来做到这一点。但是，谢谢你的时间:)