如何实现Vue中元素的收起与隐藏动画？

Question

在Vue中实现元素的收起与隐藏动画时，常见的问题是：如何在元素动态显示或隐藏时，添加平滑的过渡效果，而不仅仅是简单的 `v-if` 或 `v-show` 切换？开发者常遇到动画不流畅、高度不确定、布局抖动等问题。例如，使用 `` 包裹元素时，若元素高度不固定，直接使用 `transition: height` 难以实现平滑展开与收起。此外，如何结合 JavaScript 控制动画执行时机，以及如何兼容 Vue 2 与 Vue 3 的动画 API，也常成为实现过程中的技术难点。掌握 Vue 内置过渡组件、CSS 过渡属性及 `requestAnimationFrame` 等技巧，是解决该问题的关键。

Answer 1

一、Vue 中实现元素收起与隐藏动画的常见问题与挑战

在 Vue 中实现元素的展开与收起动画时，开发者常常面临以下问题：

• 动画不流畅，过渡生硬
• 元素高度不确定，无法直接使用 transition: height
• 布局抖动，影响用户体验
• v-if 与 v-show 无法直接支持动画
• Vue 2 与 Vue 3 的动画 API 差异较大，兼容性问题突出

二、Vue 内置的 <transition> 组件基础应用

<transition> 是 Vue 提供的内置组件，用于为元素的插入、更新和移除添加过渡效果。基本使用如下：

<transition name="fade">
  <div v-if="isVisible">内容区域</div>
</transition>

/* CSS */
.fade-enter-active, .fade-leave-active {
  transition: opacity 0.5s;
}
.fade-enter, .fade-leave-to {
  opacity: 0;
}
  

三、处理高度不确定的动画问题

当元素内容高度不固定时（如动态加载内容），直接使用 transition: height 会导致动画不流畅，甚至无效。解决方法如下：

1. 使用 max-height 替代 height，并设置一个足够大的值。
2. 使用 JavaScript 获取真实高度，并通过 requestAnimationFrame 控制动画执行。
3. 使用 Vue 的钩子函数 beforeEnter 和 enter 手动控制动画过程。

<transition
  name="slide"
  @before-enter="beforeEnter"
  @enter="enter"
  @leave="leave"
>
  <div v-show="isVisible">动态内容</div>
</transition>
  

四、Vue 2 与 Vue 3 动画 API 的兼容性处理

Vue 3 中的 <Transition> 和 Vue 2 的 <transition> 在功能上基本一致，但在钩子函数命名和使用方式上略有差异。兼容性处理建议如下：

Vue 2 钩子函数	Vue 3 钩子函数	说明
before-enter	before-enter	进入动画前准备
enter	enter	进入动画执行
after-enter	after-enter	进入动画完成
before-leave	before-leave	离开动画前准备
leave	leave	离开动画执行

五、使用 JavaScript 控制动画执行时机

在 Vue 中，可以通过 requestAnimationFrame 精确控制动画的开始与结束时机，避免布局抖动。例如：

methods: {
  beforeEnter(el) {
    el.style.height = '0';
  },
  enter(el, done) {
    requestAnimationFrame(() => {
      el.style.height = el.scrollHeight + 'px';
      el.addEventListener('transitionend', done);
    });
  },
  leave(el, done) {
    el.style.height = el.scrollHeight + 'px';
    requestAnimationFrame(() => {
      el.style.height = '0';
      el.addEventListener('transitionend', done);
    });
  }
}
  

六、动画优化与性能考量

为了提升动画性能，建议遵循以下最佳实践：

• 使用 will-change 或 transform 启用 GPU 加速
• 避免频繁操作 DOM，尽量使用 Vue 的响应式机制
• 合理使用 nextTick() 确保 DOM 更新完成后再执行动画
• 使用 transitionend 事件确保动画执行完成后再移除元素

七、完整动画组件封装示例

为了复用动画逻辑，可以封装一个通用的折叠动画组件：

// SlideTransition.vue
export default {
  name: 'SlideTransition',
  props: ['show'],
  render(h) {
    return h(
      'transition',
      {
        props: { name: 'slide' },
        on: {
          beforeEnter: this.beforeEnter,
          enter: this.enter,
          leave: this.leave
        }
      },
      this.$slots.default
    );
  },
  methods: {
    beforeEnter(el) {
      el.style.height = '0';
    },
    enter(el, done) {
      requestAnimationFrame(() => {
        el.style.height = el.scrollHeight + 'px';
        el.addEventListener('transitionend', done);
      });
    },
    leave(el, done) {
      el.style.height = el.scrollHeight + 'px';
      requestAnimationFrame(() => {
        el.style.height = '0';
        el.addEventListener('transitionend', done);
      });
    }
  }
};
  

八、流程图：Vue 动画实现流程

graph TD
A[判断是否显示] --> B{是否使用v-if}
B -->|是| C[使用transition包裹]
B -->|否| D[使用v-show + 动画钩子]
C --> E[设置CSS过渡属性]
D --> F[手动控制高度与动画]
E --> G[使用requestAnimationFrame优化]
F --> G
G --> H[绑定transitionend事件]
H --> I[动画完成回调]