反应弹簧:USTRASITION图内的轨迹不起作用

Question

我是一个新手，试图在我的react（16.8）项目中使用React Spring。我制作了一个有效的旋转木马，但是我想在每个幻灯片的底部添加一个信用，这应该交错。信用由两个项目组成，第二个应该比第一个片段慢一点。

。

为此，我想使用步道，但是虽然步道的内容渲染，但动画不会发射。

到目前为止，这是我的代码：

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>
  );

Answer 1

弄清楚了，我忘了将实际样式传递给渲染元素。

所以：

<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>