如何在反应中为 UI 设置动画？答案

【问题标题】：How to animate UI in react?如何在反应中为 UI 设置动画？
【发布时间】：2021-12-11 10:15:27
【问题描述】：

  const animate_boxes = () => {
    inner_ref.current.style.transform = "scale(0)";
    setTimeout(() => {
      if (inner_ref && inner_ref.current) {
        inner_ref.current.style.transform = "scale(1)";
      }
    }, 200);
  };

useEffect(() => {
  animate_boxes();
}, [trigger])

目前，我就是这样做的。

这是标准/良好的做法吗？如果没有，我该如何重新编写上面的代码来简化？

【问题讨论】：

标签： javascript html css reactjs frontend

【解决方案1】：

有一个出色的基于钩子的动画库，称为 react-spring，您可以单独使用它，也可以与手势库一起使用它来创建漂亮的、基于物理的、看起来很自然的动画。不过，它有一点学习曲线，here's the library's website

【讨论】：

【解决方案2】：

另一种制作动画的方法是利用带有反应状态和内联样式的 CSS 过渡属性：

https://codesandbox.io/s/react-playground-forked-3t3p6?file=/Hello.js

import React, { useEffect, useState } from "react";

const blueSquare = {
  width: "25px",
  height: "25px",
  backgroundColor: "blue",
  transition: "opacity 0.5s, transform 3s",
  margin: 20
};

const Hello = () => {
  const [opacity, setOpacity] = useState(1);
  const [transform, setTransform] = useState("translate(0,0) scale(1)");

  useEffect(() => {
    setTransform("translate(100px, 150px) scale(8)");
    setTimeout(() => {
      setTransform("translate(300px, 150px) scale(8)");
    }, 3000);
  }, []);

  return (
    <div>
      <button
        onClick={() => setOpacity((prevState) => (prevState === 1 ? 0 : 1))}
      >
        Animate Opacity
      </button>
      <div style={{ ...blueSquare, transform, opacity }} />
    </div>
  );
};

export default Hello;

但正如 Brandon 所说，如果你想做复杂的动画，那么研究 react-spring 可能会更容易。

【讨论】：