Блог

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

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

В настоящее время именно так я это и делаю.

Является ли это стандартным/хорошим способом практики? Если нет, то как я могу переписать приведенный выше код для упрощения?

Существует отличная библиотека анимации на основе крючков под названием react-spring, вы можете использовать ее самостоятельно или вместе с библиотекой жестов для создания приятных анимаций на основе физики, которые выглядят естественно. Однако у этого есть небольшая кривая обучения, вот веб-сайт библиотеки

Еще один способ анимации-использование атрибута перехода 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;

 

Но, как упоминал Брэндон, если вы хотите создавать сложные анимации, скорее всего, будет проще изучить react-spring.