React-Spring: трасса внутри карты UseTransition не работает - PullRequest
Новая
       18

React-Spring: трасса внутри карты UseTransition не работает

1 голос
/ 08 марта 2019

Я новичок, пытающийся использовать React Spring в своем проекте React (16.8). Я сделал небольшую карусель, которая работает, но я хочу добавить кредит внизу каждого слайда, который должен поражать. Кредит состоит из двух элементов, и второй должен анимироваться чуть медленнее, чем первый.

Для этого я хочу использовать Trail , но при визуализации содержимого Trail анимация не срабатывает.

Это мой код: 

const slides = [
    {
      id: 0,
      desktopImage: "http://lorempixel.com/400/200/",
      title: "foo",
      studio: "bar"
    },
    {
      id: 1,
      desktopImage: "http://lorempixel.com/400/200/",
      title: "foo",
      studio: "bar"
    },
    {
      id: 2,
      desktopImage: "http://lorempixel.com/400/200/",
      title: "foo",
      studio: "bar"
    }
  ];

  const [slideIndex, set] = useState(0);
  useEffect(
    () =>
      void setInterval(() => set(state => (state + 1) % slides.length), 4000),
    []
  );

  const transitions = useTransition(slides[slideIndex], item => item.id, {
    from: { opacity: 0, left: -10 },
    enter: { opacity: 1, left: -100 },
    leave: { opacity: 1, left: -100 },
    config: { friction: 25, duration: 4000 }
  });

  return (
    <div className="header">
      {transitions.map(({ item, props, key }) => {
        let bgImg = item.desktopImage;
        const creditArray = [item.title, item.studio];

        return (
          <div key={key}>
            <animated.div
              className="bg"
              style={{ ...props, backgroundImage: `url(${bgImg})` }}
            />
            <div className="imageCredit">
              {
                <Trail
                  key={key}
                  items={creditArray}
                  keys={key}
                  from={{ opacity: 0, transform: "translate3d(-100, 0, 0)" }}
                  to={{ opacity: 1, transform: "translate3d(0, 0, 0)" }}
                >
                  {item => props => <div className="h4">{item}</div>}
                </Trail>
              }
            </div>
          </div>
        );
      })}
    </div>
  );

1 Ответ

0 голосов
/ 08 марта 2019

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

так вместо: 

<Trail
   key={key}
   items={creditArray}
   keys={key}
   from={{ opacity: 0, transform: "translate3d(-100, 0, 0)" }}
   to={{ opacity: 1, transform: "translate3d(0, 0, 0)" }}>
        {item => props => <div className="h4">{item}</div>}
</Trail>

Мне нужно было сделать: 

<Trail
   items={creditArray}
   keys={item => item + key}
   from={{opacity: 0, transform: 'translateX(100px)'}}
   to={{opacity: 1, transform: 'translateX(0)'}}>
        {item => style => (
               <animated.div style={{ ...style }} className="h4">
                    {item}
              </animated.div>
       )}
</Trail>
...