使用 GSAP 反应动画答案

【问题标题】：React Animation With GSAP使用 GSAP 反应动画
【发布时间】：2019-06-26 14:10:18
【问题描述】：

我使用 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;

【问题讨论】：

标签： reactjs react-redux gsap react-ref

【解决方案1】：

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

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

Refecence Link for the usage of setState inside the useEffect Hook

【讨论】：