reactjs - 使用 GSAP 反应动画

Question

我使用 react 创建了一个简单的 TodoList 并尝试将 GSAP 集成到项目中。这里我利用状态来创建受控动画。

问题是

当我将待办事项添加到列表时，待办事项正在添加，但元素的不透明度设置为 0。

帮助我什么时候出错。

项目链接

Todo.js组件

import React, { useRef, useEffect, useState } from "react";
import { useDispatch } from "react-redux";
import { ToggleTodo } from "../actions";
import  {TimelineMax}  from "gsap/all";

const Todo = ({ todoInfo }) => {
  const dispatch = useDispatch();
  let todoRef = useRef(null);
  let [playState, setPlayState] = useState(true);
  const tl = new TimelineMax({ paused: true });

  useEffect(() => {
    tl.fromTo(
      todoRef,
      1,
      { opacity: 0 },
      { opacity: 1, y: "10px", onComplete: () => setPlayState(false) }
    );
    if (playState) tl.play();
  });
  return (
    <div
      className={`alert mb-2 text-white todoItem ${
        todoInfo.isCompleted ? "bg-success" : "bg-info"
        }`}
      onClick={() => dispatch(ToggleTodo(todoInfo.id))}
      ref={element => {
        todoRef = element;
      }}
    >
      {todoInfo.todoText}
      {todoInfo.isCompleted}
    </div>
  );
};

export default Todo;

Answer 1

使用 useEffect() 钩子只渲染一次元素。我们需要做的就是将空数组作为第二个参数传递给 useEffect() 钩子。

 useEffect(() => {
    tl.fromTo(
      todoRef,
      1,
      { opacity: 0 },
      { opacity: 1, y: "10px", onComplete: setPlayState(false) }
    );
    if (playState) tl.play();
  }, []);

在 useEffect Hook 中使用 setState 的参考链接