Реактивная анимация с GSAP - PullRequest
Новая
       91

Реактивная анимация с GSAP

0 голосов
/ 26 июня 2019

Я создал Simple TodoList с использованием реакции и попытался интегрировать GSAP в проект.Здесь я использовал состояние для создания управляемой анимации.

Проблема в том, что

Когда я добавляю Todo в список, Todo добавляется, но непрозрачность элемента равнаустановите на 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;

1 Ответ

0 голосов
/ 27 июня 2019

Визуализируйте элемент только один раз, используя хук useEffect (). Все, что нам нужно сделать, это передать пустой массив в качестве второго аргумента хуку useEffect (). 

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

Ссылка Refecence для использования setState внутри useEffect Hook

...