反应中的gsap时间线答案

【问题标题】：gsap timeline in react反应中的gsap时间线
【发布时间】：2022-06-13 14:44:43
【问题描述】：

我是 gsap 的新手，并试图在其上制作一些动画，但是当我将 gsap 设置为我的标题时它不起作用。这是我的代码：

import { gsap } from "gsap";

  let tl = gsap.timeline();

  useEffect(() => {
    tl.from(".lastHeader", { y: 50, duration: 1 });
  }, []);

提前致谢。

【问题讨论】：

嗨！检查元素.lastHeader 是否被转换？尝试添加let tl = gsap.timeline({paused: true})，然后在创建tl (tl.from(...)) 后尝试调用tl.play()。或者尝试添加let tl = gsap.timeline({repeat: -1, yoyo: true}) 并检查动画是否无限播放
.lastHeader 是一个跨度元素，这就是为什么它不起作用，但为什么呢？我尝试将它与 div 元素一起使用，它工作正常。为什么它不适用于 span 元素？
由于css变换不适用于内联元素，可以将css改为display: inline-block更详细stackoverflow.com/a/24962108/14135825

标签： reactjs gsap

【解决方案1】：

import { gsap } from "gsap";

  useEffect(() => {
    let tl = gsap.timeline();
    tl.from(".lastHeader", { y: 50, duration: 1 });
  }, []);


you can use like this once

【讨论】：

【解决方案2】：

为了避免在每次渲染时都创建新的时间线，重要的是在效果内创建时间线并将其存储在 ref 中。

这也将允许您以不同的效果访问时间线。

在此处查看示例：

function App() {
  const el = useRef();
  const q = gsap.utils.selector(el);
  const tl = useRef();
      
  useEffect(() => {            
    
    tl.current = gsap.timeline()
      .to(q(".box"), {
        rotate: 360
      })
      .to(q(".circle"), {
        x: 100
      });

  }, []);
  
  return (
    <div className="app" ref={el}>
      <Box>Box</Box>
      <Circle>Circle</Circle>
    </div>
  );
}

更多信息在这里：https://greensock.com/react/

【讨论】：