GSAP-анимация элементов в массиве, полученном с сервера - PullRequest
Новая
       15

GSAP-анимация элементов в массиве, полученном с сервера

1 голос
/ 06 ноября 2019

Я хотел бы анимировать каждый элемент в массиве с помощью TweenMax.staggerFrom . На данный момент я создал этот рабочий образец 

import React, { useRef, useEffect createRef } from 'react';
import { TweenMax } from 'gsap';

const AnimateView = () => {
  const data = [
    { title: 'Title 1', value: 1000 },
    { title: 'Title 2', value: 1100 },
    { title: 'Title 3', value: 1200 },
  ];

  const elementsRef = useRef(data.map(() => createRef()));

  useEffect(() => {
    const elements = elementsRef.current.map(el => el.current);

    TweenMax.staggerFrom(elements, 1, { scale: 0 }, 0.3);
  }, []);

  return (
    <>
      {data.map((item, index) => (
        <div ref={elementsRef.current[index]}>{item.title}</div>
      ))}
    </>
  );
};

export default AnimateView;

Разница в том, что я хочу, чтобы массив data был получен с сервера. Я не могу понять, почему в elementsRef я не получаю никаких ссылок. Ниже вы можете проверить, чего я хотел достичь. 

import React, { useRef, useEffect createRef } from 'react';
import { TweenMax } from 'gsap';
import { connect } from 'react-redux';
import { fetchData } from 'actions';

const AnimateView = ({ combineFetching, income }) => {

  const elementsRef = useRef(income.length && income.map(() => createRef()));

  useEffect(() => {
    const elements = elementsRef.current.map(el => el.current);

    TweenMax.staggerFrom(elements, 1, { scale: 0 }, 0.3);
  }, []);

  return (
    <>
      <button onClick={fetchData}>Click</button>
      {income.map((item, index) => (
        <div ref={elementsRef.current[index]}>{item.title}</div>
      ))}
    </>
  );
};

const mapDispatchToProps = state => ({
  income: state.budget.income,
});

export default connect(
  mapDispatchToProps,
  { fetchData },
)(AnimateView);

При нажатии я хочу получить данные из базы данных и анимировать каждый элемент в массиве.

...