Nuxt3组件中Transition过渡动画失效问题求助

你的侧边栏Transition动画失效，核心是两个关键问题导致的：

1. 父容器的v-if直接销毁了Transition组件 #

你在Sidebar.vue里给sidebar-backdrop加了v-if="sidebar"，当关闭侧边栏时，这个容器会直接从DOM中移除——内部的Transition组件根本没机会执行离开动画，就被一起销毁了。

解决方法：保留backdrop的DOM结构 #

把sidebar-backdrop的v-if改成v-show，或者调整结构让backdrop始终存在（通过样式控制显示/隐藏），确保Transition能完整执行动画：

<template>
  <div class="sidebar">
    <!-- 用v-show保留DOM，让Transition有机会执行离开动画 -->
    <div class="sidebar-backdrop" @click.prevent="toggle" v-show="sidebar">
      <Transition name="slide">
        <div v-if="sidebar" class="sidebar-panel">
          <slot></slot>
        </div>
      </Transition>
    </div>
  </div>
</template>

更优雅的写法是让backdrop始终存在，通过状态控制背景透明度和点击事件：

<template>
  <div class="sidebar">
    <div 
      class="sidebar-backdrop" 
      @click.prevent="toggle" 
      :class="{ 'active': sidebar }"
    >
      <Transition name="slide">
        <div v-if="sidebar" class="sidebar-panel">
          <slot></slot>
        </div>
      </Transition>
    </div>
  </div>
</template>

<style scoped>
.sidebar-backdrop {
  background-color: rgba(0,0,0,0);
  width: 100vw;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  cursor: pointer;
  transition: background-color 0.2s ease;
  pointer-events: none; /* 未激活时不响应点击 */
}
.sidebar-backdrop.active {
  background-color: rgba(0,0,0,.5);
  pointer-events: auto; /* 激活时响应点击 */
}
/* 原有过渡样式不变 */
.slide-enter-active,
.slide-leave-active {
  transition: transform 0.2s ease;
}
.slide-enter,
.slide-leave-to {
  transform: translateX(-100%);
}
/* ...其他样式 */
</style>

2. Scoped样式可能限制过渡类生效 #

如果上述修改后动画仍不生效，可能是scoped样式隔离导致过渡类无法作用到元素上。可以用:deep()包裹过渡类，或者把过渡样式移到全局样式中：

<style scoped>
:deep(.slide-enter-active),
:deep(.slide-leave-active) {
  transition: transform 0.2s ease;
}

:deep(.slide-enter),
:deep(.slide-leave-to) {
  transform: translateX(-100%);
}
/* ...其他样式 */
</style>

额外优化：统一状态引用 #

你已经在useStates.ts中导出了isNavOpen，直接导入使用即可，避免重复调用useState('isNavOpen')，让代码更规范：

<!-- Sidebar.vue -->
<script setup lang="ts">
import { isNavOpen } from '~/composables/useStates';
const sidebar = isNavOpen;

const toggle = () => {
  sidebar.value = !sidebar.value;
}
</script>

<!-- Hamburger.vue -->
<script setup lang="ts">
import { isNavOpen } from '~/composables/useStates';
const hamburger = isNavOpen;

const toggle = () => {
  hamburger.value = !hamburger.value;
}
</script>

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