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

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

工具

我用 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>

我来解答赞 2 收藏

反馈

1 条解答

打工人子璐 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