Vue 折叠过渡如何实现平滑过渡，消除 HTML 跳动？

如何在 Vue 中实现平滑的折叠过渡

问题背景

Vue 中的 v-if 指令可以平滑地显示或隐藏内容。但是，当动画完成后，下面的 HTML 元素往往会出现跳动，破坏了无缝的过渡体验。

解决方案：基于 Max-height 的 JS 过渡

为了解决这个问题，我们可以采用基于 max-height 的纯 JS 解决方案：

• 为隐藏内容添加一个 CSS 类（如 "smooth-leave-active"）
• 为出现的内容添加一个 CSS 类（如 "smooth-enter-active"）
• 定义过渡规则，设置 max-height 为 0，动画时间为 0.5s

Vue 中的实现

将上述 JS 解决方案应用于 Vue：

1. 在 Vue 组件中创建 smooth-enter-active 和 smooth-leave-active CSS 类。
2. 使用 transition 组件，设置 enter-active-class 为 smooth-enter-active，leave-active-class 为 smooth-leave-active。
3. 将 v-if 指令包裹在 transition 组件中，以实现平滑的过渡。

效果

这种方法可以实现类似于 Bootstrap 4 折叠效果的平滑过渡，在显示或隐藏 v-if 内容时不会出现 HTML 跳动。

完整代码示例

<template>
  <div>
    <button @click="toggleVisible">Toggle</button>
    <transition
      name="smooth"
      enter-active-class="smooth-enter-active"
      leave-active-class="smooth-leave-active"
    >
      <p v-if="visible">This is the content that will transition smoothly.</p>
    </transition>
  </div>
</template>

<script>
export default {
  data() {
    return {
      visible: false,
    };
  },
  methods: {
    toggleVisible() {
      this.visible = !this.visible;
    },
  },
};
</script>

<style>
.smooth-enter-active, .smooth-leave-active {
  transition: max-height .5s;
}
.smooth-enter, .smooth-leave-to {
  max-height: 0 .5s;
}
</style>

结论

通过 max-height 过渡，我们实现了平滑的 Vue 过渡，在显示或隐藏 v-if 内容时消除了 HTML 跳动。这种方法可以极大地改善用户体验，提升应用程序的专业性和美观性。

常见问题解答

1. 这种方法适用于所有 Vue 组件吗？

   • 是的，这种方法适用于所有 Vue 组件。

2. 我可以自定义动画时间吗？

   • 可以，通过修改 max-height 过渡的持续时间属性来实现。

3. 这种方法是否支持多个元素的过渡？

   • 是的，这种方法支持多个元素的过渡，只需为每个元素指定相应的 CSS 类即可。

4. 我可以在 Vue 的 <transition-group> 中使用这种方法吗？

   • 是的，可以通过在 <transition-group> 中使用<transition> 组件实现。

5. 这种方法有什么限制吗？

   • 这种方法的限制是它只适用于基于 max-height 的动画，不适用于其他类型的动画。