为什么 react-spring 不重复工作？

Question

我正在尝试 react-spring together with useInterval:

https://codesandbox.io/s/mutable-water-icy6m

export default App = () => {
  let [count, setCount] = useState(0);

  useInterval(() => {
    setCount(count + 1);
  }, 1000);

  const style = useSpring({
    opacity: 1 - Math.random() / 10,
    from: { opacity: 0 + Math.random() / 10 }
  });

  return <animated.h1 style={style}>{count}</animated.h1>;
};

一开始我用的是

  const style = useSpring({
    opacity: 1,
    from: { opacity: 0 }
  });

但我想如果虚拟 DOM 与以前的值没有任何差异，那么它就不会重新渲染，所以我添加了 Math.random() / 10 来稍微改变一下这样它就可以工作，但是除了第一个之外，它不会每隔一秒就消失一次。如何让它发挥作用？

Answer 1

如果你想让动画再次开始你需要设置reset标志：

const style = useSpring({
opacity: 1,
from: { opacity: 0},
reset:true});

为什么 react-spring 不重复工作？

Why does react-spring not repeatedly work?

javascript

reactjs

react-spring