如何在React中使用gsap.from（）

Question

我正在尝试创建一个交错动画，其中三个点出现，延迟为0.2s 这是我为第一个点编写的代码，它应该从不透明度转到不透明度：1（作为圆圈的默认不透明度为1），但是不透明度保留0，从未更改为1

GSAP. ，{ 持续时间：0.2， 不透明度：0， X：20， 轻松：“ Power.4.easein”， }）;

Answer 1

我认为这会解决

import { useLayoutEffect } from "react";
import "./App.css";
import gsap from "gsap";

function App() {
  useLayoutEffect(() => {
    let from = gsap.from(".circle", {
      duration: 1.5,
      opacity: 0,
      stagger: 0.2,
      immediateRender: false,
    });
    return () => {
      from.kill();
    };
  });

  return (
    <div className="App">
      <div className="_con">
        <div className="circle"></div>
        <div className="circle"></div>
        <div className="circle"></div>
      </div>
    </div>
  );
}

export default App;