React/animation - 每当状态或道具改变时点击按钮渲染动画

Question

每次单击以下项目中的按钮时，我都试图让动画工作

描述有 3 个按钮，分别命名为 first、second 和 third。当我点击第一个时，下面的紫色框首先显示，当我点击第二个时，它显示第二个等等，基本上 div 每次都根据按钮点击进行更新。

问题： 但是我给 div 的动画 fadIn 仅在应用程序加载时有效。我怎样才能让它在每次单击按钮时都起作用，以便每次单击时框淡入动画。

Answer 1

const Renders = ({ arr }) => {
  const [load, setLoad] = useState(false);

  useEffect(() => {
    setLoad(true);
    setTimeout(() => {
    setLoad(false);
    }, 1);

  }, [arr]);

  if (load) return <></>;

  return (
    <div className="renders">
      <div className="zoomers">{arr}</div>
    </div>
  );
};

Answer 2

这是另一种方法：

const Renders = ({ arr }) => {
  const [load, setLoad] = useState(false);

  useEffect(() => {
    setLoad(true);
    setTimeout(() => {
    setLoad(false);
    }, 1);

  }, [arr]);

  return (
    <div className="renders">
      <div className={load ? '' : "zoomers"}>{arr}</div>
    </div>
  );
};

现在看起来不一样了，在你加载和卸载之前，现在它只是一个使用 class 名称的游戏，每次你加载带有动画的元素时 class 所以它开始工作

React/animation - 每当状态或道具改变时点击按钮渲染动画

React/animation - render animation everytime on button click when state or props change

javascript

css

reactjs

css-animations