Vue3中vue-slide-up-down库滑入前挂载滑出后卸载的实现问题

原库默认行为 #

vue-slide-up-down 本身只支持预挂载元素的动画，行为如下：

• 滑下场景：动画开始前不会挂载元素
• 滑上场景：动画结束后不会卸载元素
• 仅通过操作元素的height和hidden属性实现动画效果

需求 #

希望目标元素未显示时处于未挂载状态：

• 滑下场景：动画开始前先挂载元素
• 滑上场景：动画完成后卸载元素，而非仅隐藏

错误尝试及问题 #

如果直接用v-if绑定控制组件挂载，代码如下：

<slide-up-down 
  v-if="active"
  :active="active" 
>
  Only show this if "active" is true
</slide-up-down>

这种写法无法实现预期动画，原因是：

• 滑下场景：动画在元素挂载前就已启动，此时元素还未渲染，看不到动画效果
• 滑上场景：元素在动画启动前就被卸载，动画根本没机会执行

解决方案 #

要实现动画完成后卸载、挂载后再触发动画，需要拆分状态变量，分别控制元素挂载和动画触发，并利用组件的动画结束事件同步状态：

实现步骤 #

1. 定义两个独立状态：

   • isMounted：控制元素是否挂载到DOM中
   • isActive：控制动画的启动/结束

2. 滑下逻辑：

   • 先设置isMounted = true挂载元素
   • 等待DOM更新完成后，再设置isActive = true触发滑下动画

3. 滑上逻辑：

   • 先设置isActive = false触发滑上动画
   • 监听组件的@after-hide事件，在动画结束后设置isMounted = false卸载元素

示例代码 #

<template>
  <slide-up-down 
    v-if="isMounted"
    :active="isActive"
    @after-hide="onAfterHide"
  >
    仅在激活状态下显示的内容
  </slide-up-down>
</template>

<script>
export default {
  data() {
    return {
      isMounted: false,
      isActive: false
    };
  },
  methods: {
    // 触发滑下动画
    showContent() {
      this.isMounted = true;
      // 等待DOM挂载完成后启动动画
      this.$nextTick(() => {
        this.isActive = true;
      });
    },
    // 触发滑上动画
    hideContent() {
      this.isActive = false;
    },
    // 滑上动画结束后卸载元素
    onAfterHide() {
      this.isMounted = false;
    }
  }
};
</script>

这种方式就能完美满足需求：滑下前先挂载元素，滑上完成后再卸载元素，同时保留完整的动画效果。

内容的提问来源于stack exchange，提问作者Takeshi Tokugawa YD