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

Posted 2023-03-05

【中文标题】如何在反应中为 UI 设置动画？

【英文标题】：How to animate UI in react?

【发布时间】：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])

目前，我就是这样做的。

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

【参考方案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 可能会更容易。