Chrome 动画面板为啥不显示我的 Vue 过渡动画？

ლ梦雅提问于 2026-03-08 23:05:21 阅读 32

工具

我用 Vue 写了个简单的列表过渡，但在 Chrome DevTools 的 Animations 面板里完全看不到任何动画记录，是我写错了吗？

我已经打开了 DevTools 的「Animations」tab，也点击了页面上的按钮触发动画，但面板一直是空的。试过加 transition 和 animation 属性，都没用。

<template>
  <transition-group name="list">
    <div v-for="item in items" :key="item.id" class="item">
      {{ item.text }}
    </div>
  </transition-group>
</template>

<style scoped>
.list-enter-active, .list-leave-active {
  transition: opacity 0.5s;
}
.list-enter-from, .list-leave-to {
  opacity: 0;
}
</style>

我来解答赞 4 收藏

反馈

2 条解答

轩辕淑怡 Lv1

看起来你遇到的是 Chrome DevTools Animations 面板的一个常见问题。Vue 的过渡系统其实依赖 CSS 来实现动画，但有些情况 DevTools 可能识别不到这些动画。

首先检查下你的 transition 写法是正确的，这部分看起来没问题。但要想在 Animations 面板中显示，得确保用的是 CSS 动画而不是简单的过渡。

试试把 transition 改成关键帧动画 @keyframes，像这样：

.list-enter-active, .list-leave-active {

  animation: slideIn 0.5s;

}

@keyframes slideIn {

  from { opacity: 0; }

  to { opacity: 1; }

}

这个改动能让 DevTools 更容易捕捉到动画。另外记得清除缓存再试一次，有时候浏览器缓存会搞鬼。

要是还不行，可能就是 Vue 的一些特性导致的。我以前也遇到过类似情况，最后发现是因为用了 scoped 样式。试着去掉 scoped 属性看看，确实有时候会影响到动画检测。

总的来说，Chrome 的动画面板对 CSS 动画的支持比对 transition 更好，这是个通用做法。希望这些建议能帮到你，折腾了一下午这个问题挺烦人的。

2026-03-26 16:09

打工人子璐 Lv1

这个问题我也踩过坑，Vue的过渡动画在DevTools里确实比较特殊。根本原因是Chrome的Animations面板默认只捕获CSS Animation（@keyframes那种），而Vue的transition用的是CSS Transition。

两个解决办法：

1. 最简单的是改用animation写法：



.list-enter-active {

  animation: fadeIn 0.5s;

}

@keyframes fadeIn {

  from { opacity: 0; }

  to { opacity: 1; }

}

2. 如果非要用transition，可以强制让DevTools记录：
在DevTools设置里勾选"Enable advanced paint instrumentation"，然后刷新页面。不过这个方案不太稳定，有时能抓到有时抓不到。

Vue官方文档其实提到过这个（虽然藏得比较深），推荐的做法是用第一种方案，毕竟调试动画时能可视化看到时间轴真的很重要。顺便吐槽下，Chrome团队啥时候能把transition也加进面板啊...

另外检查下你的transition-group有没有正确触发，可以在控制台打印items的变化确认下。有时候数据没变当然不会触发动画。

2026-03-08 23:07