React Spring动画结束后如何自动移除内联样式？

雨橙提问于 2026-03-01 06:39:18 阅读 18

框架

我用 React Spring 做了个简单的淡入动画，但动画结束后元素上还留着 transform 和 opacity 的内联样式，导致后续 CSS 样式被覆盖了。试过 onRest 回调里手动清除，但感觉不太优雅，有没有更标准的做法？

比如下面这个 CSS 类本来应该控制最终状态，但被内联样式挡住了：

.fade-in {
  opacity: 1 !important;
  transform: translateY(0) !important;
}

我来解答赞 5 收藏

反馈

1 条解答

可歆 Dev Lv1

你这个问题最直接的办法就是动画结束后条件渲染一个普通元素，别让 animated 组件一直挂着。

const [finished, setFinished] = useState(false);



const styles = useSpring({

  from: { opacity: 0, transform: 'translateY(20px)' },

  to: { opacity: 1, transform: 'translateY(0)' },

  onRest: () => setFinished(true),

});



return finished 

  ? 内容


  : 内容;

或者干脆用 useTransition，它本身就支持 enter/leave 配置，离开时自动清理。还有，别用 !important，这是在给自己挖坑。

2026-03-01 08:04