Vue中Teleport实现购物车模态框的slide-fade过渡CSS问题

你的代码存在两处关键问题：一是Teleport与过渡组件的层级关系错误，二是过渡参数不够灵活且变量不统一。以下是修正后的完整实现：

完整Vue组件代码 #

<template>
  <button @click="showCart = true">打开购物车</button>

  <Teleport to="body">
    <transition name="slide-fade">
      <div v-show="showCart" class="cart-overlay fixed inset-0 bg-black/50 z-50" @click.self="showCart = false">
        <div class="cart-container fixed top-0 right-0 h-full w-96 bg-white shadow-xl overflow-hidden">
          <div class="p-4">
            <button @click="showCart = false">关闭</button>
            <p>购物车商品列表...</p>
          </div>
        </div>
      </div>
    </transition>
  </Teleport>
</template>

<script setup>
import { ref } from 'vue';
const showCart = ref(false);
</script>

对应的CSS样式 #

/* 购物车主体的过渡动画 */
.slide-fade-enter-active,
.slide-fade-leave-active {
  transition: all 0.3s ease;
}

.slide-fade-enter-from,
.slide-fade-leave-to {
  transform: translateX(100%); /* 用百分比适配任意宽度的购物车 */
  opacity: 0;
}

/* 遮罩层的淡入淡出过渡（可选优化） */
.cart-overlay {
  transition: opacity 0.3s ease;
}

.slide-fade-enter-from .cart-overlay,
.slide-fade-leave-to .cart-overlay {
  opacity: 0;
}

关键细节说明 #

• 将<transition>嵌套在<Teleport>内部，确保过渡作用于最终挂载到body的元素，避免父元素样式干扰
• 使用translateX(100%)替代固定像素值，保证购物车无论宽度多少，都能完全滑出视口右侧
• 通过@click.self实现点击遮罩层关闭购物车，点击购物车内部不会触发关闭
• 给遮罩层单独添加透明度过渡，让整体动画更流畅自然

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