Jotai 的 atom 值更新后，为什么 CSS 动画没触发？

a'ゞ胜换提问于 2026-03-08 12:28:20 阅读 3

框架

我用 Jotai 管理一个状态，控制元素的显示/隐藏，但状态变了，CSS 的 transition 却没生效，是哪出问题了？

我试过直接改 class，也试过用 useEffect 监听 atom 值，但动画就是不跑。下面是相关的 CSS：

.panel {
  height: 0;
  opacity: 0;
  overflow: hidden;
  transition: all 0.3s ease;
}
.panel.visible {
  height: auto;
  opacity: 1;
}

是不是因为 height: auto 不能被 transition 啊？那该怎么解决？

我来解答赞 0 收藏

反馈

1 条解答

皇甫玉萱 Lv1

哈，这个问题我遇到过，确实是 height: auto 的问题。transition 对 auto 这种计算值不感冒，得用具体数值。

建议改成用 max-height 过渡，虽然有点 hacky 但确实有效。比如这样：

.panel {
max-height: 0;
opacity: 0;
overflow: hidden;
transition: all 0.3s ease;
}
.panel.visible {
max-height: 1000px; / 设个足够大的值 /
opacity: 1;
}

还有个小坑要注意，Jotai 更新后 DOM 可能还没渲染完。可以在 useEffect 里加个 setTimeout 0 确保 CSS 更新：

useEffect(() => {

  setTimeout(() => {

    // 这里操作 class

  }, 0)

}, [atomValue])

说真的，CSS 动画有时候比后端处理还麻烦...

2026-03-08 13:02