useSpring 不会在道具更改时设置动画

Question

与 Spring 文档中提到的相反，useSpring 不会在道具更改时为我的计数器组件设置动画：

如果您使用更改的道具重新渲染组件，动画将更新。

我尝试将道具作为孩子传递，但没有效果。我错过了什么？这是一个演示： https://codesandbox.io/s/spring-counter-jsylq?file=/src/App.js:199-230

import React, { useState } from "react";
import { animated, useSpring } from "react-spring";

const Counter = ({ value }) => {
  const anim = useSpring({ from: { opacity: 0 }, to: { opacity: 1 } });

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

export default function App() {
  const [count, setCount] = useState(0);

  return (
    <>
      <Counter value={count} />
      <button onClick={() => setCount(count + 1)}>increment</button>
    </>
  );
}

Answer 1

它只是说动画会更新。但现在动画有点静态。

你可以做几件事。如果添加了 reset 属性，那么它将在每次重新渲染时重复初始动画。

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

或者您可以根据计数值添加一些属性。例如平价。奇数变为蓝色，偶数变为红色。

const anim = useSpring({ from: { opacity: 0 }, to: { opacity: 1 , color: value % 2 === 0 ? 'red' : 'blue'} });

你怎么看？

https://codesandbox.io/s/spring-counter-forked-znnqk