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

Question

我正在尝试react-spring 和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});