Nuxt中数据变更时如何实现动画/过渡效果？

问题原因 #

Vue的<transition>组件默认只监听元素的插入/移除或组件切换行为，单纯的文本内容更新（比如{{data}}的变化）不会触发过渡，因为<h1>元素本身始终存在，没有被插入或移除。

有效解决方案 #

1. 给元素添加key属性（最简便） #

通过绑定key到data，让Vue在data变更时认为这是一个新元素，从而触发插入/移除过渡：

<transition name="fade" mode="out-in">
  <h1 :key="data">{{data}}</h1>
</transition>

搭配对应的CSS过渡样式：

.fade-enter-active, .fade-leave-active {
  transition: opacity 0.5s ease;
}
.fade-enter-from, .fade-leave-to {
  opacity: 0;
}

2. 用v-if控制元素显隐 #

通过切换元素的存在状态触发过渡，需要配合事件钩子确保数据更新时机：

<transition name="fade" mode="out-in">
  <h1 v-if="isVisible">{{data}}</h1>
</transition>

// 更新数据时的逻辑
updateData(newVal) {
  this.isVisible = false;
  setTimeout(() => {
    this.data = newVal;
    this.isVisible = true;
  }, 500); // 等待离开动画结束
}

3. 利用过渡钩子自定义动画 #

如果不想替换元素，可通过钩子函数手动控制文本的过渡效果：

<transition 
  name="fade"
  @enter="onEnter"
  @leave="onLeave"
>
  <h1 ref="titleEl">{{data}}</h1>
</transition>

methods: {
  onEnter(el) {
    el.style.opacity = 0;
    requestAnimationFrame(() => {
      el.style.transition = 'opacity 0.5s';
      el.style.opacity = 1;
    });
  },
  onLeave(el, done) {
    el.style.opacity = 0;
    setTimeout(done, 500);
  }
}

注意事项 #

• 必须确保CSS中正确定义了过渡类的样式，否则动画无法显示。
• mode="out-in"会先执行离开动画，再执行进入动画，适合内容替换场景。

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