1

我是一个新手，试图在我的 React (16.8) 项目中使用 React Spring。我做了一个小旋转木马，它可以工作，但我想在每张幻灯片的底部添加一个应该错开的信用。信用由两个项目组成，第二个应该比第一个慢一点。

为此，我想使用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>
  );

4

1 回答 1

0

想通了，我忘了将实际样式传递给渲染的元素。

所以而不是：

<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>
于 2019-03-08T11:31:13.287 回答