时间戳

首页 > 解决方案 > 如何使用material-ui动态添加/删除类名？

javascript - 如何使用material-ui动态添加/删除类名？

问题描述

如何动态添加/删除类到 img 标签。基本上我想每 2 秒自动更改一次图像，就像 Instagram 注册页面一样。但我不知道如何使用 material-ui 方法来做到这一点。这是我的代码，我想添加某些类并定期删除它们。

<div className={classes.phoneImageWrapper}>
  <img src={Phone1} alt="instagram" className={classes.phoneImage} />
  <img src={Phone2} alt="instagram" className={classes.phoneImage} />
  <img src={Phone3} alt="instagram" className={classes.phoneImage} />
  <img src={Phone4} alt="instagram" className={classes.phoneImage} />
  <img src={Phone5} alt="instagram" className={classes.phoneImage} />
</div>

这是我想在每 2 秒后向 img 添加/删除 phoneImageAnimation 和 phoneImageVisible 的样式

phoneImageWrapper: {
  margin: "10px 0 0 151px",
  position: "relative",
},
phoneImage: {
  top: 100,
  left: 0,
  position: "absolute",
  width: 240,
  height: 427,
  opacity: 0,
  visibility: "hidden",
},
phoneImageAnimation: {
  transition: "opacity 1.5s ease-in",
  zIndex: 2,
},
phoneImageVisible: {
  opacity: 1,
  visibility: "visible",
}

Instagram 注册页面

标签： javascriptcssreactjsreact-hooksmaterial-ui

解决方案

我认为您可以使用setInterval内部useEffect钩子。像这样。

 const [activeIndex, setActiveIndex] = useState(0);

 const images = [
   <img src="/1.webp" alt="1" />,
   <img src="/2.png" alt="2" />,
   <img src="/3.webp" alt="3" />
 ];

  useEffect(() => {
    let timer = setInterval(() => {
      setActiveIndex((prevIndex) => {
        return (prevIndex + 1) % images.length;
      });
    }, 2000);

    return () => {
      clearInterval(timer);
    };
  }, []);

对于动画，您可以使用react-transition-group

我为您创建了一个示例。codepen_link

推荐阅读