如何使用React CSSTransition为自动循环的组件设置动画

编程问答 2022-08-13

问题描述

我正在尝试使用'react-transition-group'包淡入/淡出3个在页面上自动循环的组件。

在这种情况下，我无法理解如何使“ in”道具起作用。我知道这是行不通的，因为计数器始终为true，并且需要更改，但是我找不到找到使其工作的方法。 CSS类不会添加到元素中。

这是我的代码和一个codesandbox：

import React,{ useEffect,useState } from "react";
import { Csstransition } from "react-transition-group";

import "./styles.css";

export default function App() {
  const [counter,setCounter] = useState(0);

  const divArray = [
    <div>Component 1</div>,<div>Component 2</div>,<div>Component 3</div>
  ];

  useEffect(() => {
    console.clear();
    const interval = window.setInterval(() => {
      setCounter((prevCounter) => {
        if (prevCounter > divArray.length - 1) return 1;
        return prevCounter + 1;
      });
    },1000);

    return () => clearInterval(interval);
  });

  return (
    <div className="App">
      <h1>Hello CodeSandBox</h1>
      <Csstransition in={counter} appear timeout={1000} classNames="fade">
        <h3>{divArray[counter - 1]}</h3>
      </Csstransition>
    </div>
  );
}

感谢您的帮助。

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

reactcsstransitiongroupreactcsstransitiongroupreactjsreactjsreactjsreactjs