reactjs - 更新道具时使用“react-spring”为“React.Component”设置动画的最简单方法是什么

Question

如何使用 react-spring 库为 React 组件设置动画取决于道具更新

我找到了这个https://codesandbox.io/s/xpqq0ll5nw并想用钩子实现同样的功能

const Counter = ({quantity}) => {
  const animation = useSpring({
    transform: 'scale(1)',
    from: { transform: 'scale(1.2)' },
  });

  return (
    <animated.span style={animation}">
      {quantity}
    </animated.span>
  )
}

Answer 1

您的计数器组件是正确的。这里的关键是“关键”属性。当 counter 改变时，它会在 1 和 0 之间交替。每次 key 改变时，React 都会分配一个新的 Counter 组件实例，而不是旧的，重复 Counter 组件的初始动画。

  class App extends Component {
    state = { count: 0 };
    increment = () => this.setState({ count: this.state.count + 1 });
    render() {
      return (
        <Fragment>
          <button onClick={this.increment}>Update!</button>
          <Counter key={this.state.count % 2} quantity={this.state.count} />
        </Fragment>
      );
    }
  }

这是整个示例：https ://codesandbox.io/s/jjyp6p0yl9