如何通过React Hooks在点击按钮等场景下重新触发react-spring动画？

嘿，这个问题我熟！要重复触发react-spring的动画，核心是让useSpring感知到状态变化，或者直接调用它提供的更新方法。下面给你两种常用的实现方式，分别对应点击按钮和Promise完成的场景：

方法一：通过状态开关触发（适合点击按钮等交互场景） #

你可以定义一个状态变量作为动画的触发开关，每次改变这个变量，就让动画重新执行。关键是开启reset属性，并把开关变量加入useSpring的依赖数组：

import { useSpring, animated } from 'react-spring'
import { useState } from 'react'

function App() {
  // 用一个数字作为触发开关，每次点击就自增
  const [animateTrigger, setAnimateTrigger] = useState(0)
  
  const props = useSpring({
    opacity: 1,
    from: { opacity: 0 },
    reset: true, // 开启reset，让依赖变化时重新从初始状态启动动画
  }, [animateTrigger]) // 把触发开关加入依赖数组

  return (
    <div>
      <animated.div style={props}>我会在每次点击时淡入！</animated.div>
      <button onClick={() => setAnimateTrigger(prev => prev + 1)}>点击触发动画</button>
    </div>
  )
}

方法二：使用更新函数触发（适合Promise或异步场景） #

useSpring还可以返回一个更新函数，你可以在异步操作完成后手动调用它来触发动画，这种方式更灵活：

import { useSpring, animated } from 'react-spring'

function App() {
  // 解构出动画属性和更新函数
  const [props, updateSpring] = useSpring(() => ({ opacity: 0 }))

  // 模拟一个异步操作（比如API请求）
  const handleAsyncTask = () => {
    new Promise(resolve => {
      setTimeout(() => resolve('异步任务完成'), 2000)
    }).then(() => {
      // 手动调用更新函数，触发从透明到显示的动画
      updateSpring({ opacity: 1, from: { opacity: 0 } })
    })
  }

  return (
    <div>
      <animated.div style={props}>Promise完成后我会淡入！</animated.div>
      <button onClick={handleAsyncTask}>启动异步任务</button>
    </div>
  )
}

补充小技巧 #

• 如果想让动画可以反复触发，你可以在每次动画结束后重置状态，或者在触发时动态切换from和目标值。
• 对于更复杂的动画序列（比如元素进入/退出），可以尝试useTransition或useChain来管理，但上面两种方法已经能覆盖大部分日常场景啦。

内容的提问来源于stack exchange，提问作者oemera