使用InertiaJS(Vue3+Laravel)模态框时过渡动画不生效求助

我用InertiaJS（Vue3 + Laravel）开发模态框组件，模态框能正常显示，但过渡动画完全没效果。试过调整<transition>标签位置，还是不行，想实现模态框从底部滑出的过渡效果，代码如下：

<teleport to="body">
    <transition leave-active-class="duration-200">
        <div
            v-show="show"
            class="fixed inset-0 overflow-y-auto z-50"
            scroll-region
        >
            <div
                v-show="show"
                class="fixed inset-0 transform transition-all"
                @click="close"
            >
                <div class="absolute inset-0 bg-black opacity-75" />
            </div>

            <transition
                enter-active-class="ease-out duration-300"
                enter-from-class="opacity-0"
                enter-to-class="opacity-100"
                leave-active-class="ease-in duration-200"
                leave-from-class="opacity-100"
                leave-to-class="opacity-0"
            >
                <div
                    v-show="show"
                    style="max-width: 800px"
                    class="text-white bg-dark-btn px-6 py-4 rounded-t-2xl overflow-hidden shadow-xl transform transition-all fixed bottom-0 w-full mx-auto right-0 left-0"
                >
                    <slot v-if="show" />
                </div>
            </transition>
        </div>
    </transition>
</teleport>

问题原因及修复方案 #

• 多层v-show干扰过渡触发：外层容器和内部元素重复使用v-show，Vue的<transition>需要直接绑定到被切换的目标元素，多层切换会导致过渡逻辑失效。
• 过渡类未配置位移属性：当前只设置了透明度变化，没有添加底部滑出所需的垂直位移类，无法实现预期的滑出效果。
• 冗余transition嵌套：外层的<transition>没有实际作用，反而会和内层过渡逻辑冲突。

修复后的代码 #

<teleport to="body">
  <div class="fixed inset-0 overflow-y-auto z-50">
    <!-- 遮罩层过渡 -->
    <transition
      enter-active-class="ease-out duration-300"
      enter-from-class="opacity-0"
      enter-to-class="opacity-100"
      leave-active-class="ease-in duration-200"
      leave-from-class="opacity-100"
      leave-to-class="opacity-0"
    >
      <div
        v-show="show"
        class="fixed inset-0"
        @click="close"
      >
        <div class="absolute inset-0 bg-black opacity-75" />
      </div>
    </transition>

    <!-- 模态框内容过渡（从底部滑出） -->
    <transition
      enter-active-class="ease-out duration-300"
      enter-from-class="translate-y-full opacity-0"
      enter-to-class="translate-y-0 opacity-100"
      leave-active-class="ease-in duration-200"
      leave-from-class="translate-y-0 opacity-100"
      leave-to-class="translate-y-full opacity-0"
    >
      <div
        v-show="show"
        style="max-width: 800px"
        class="text-white bg-dark-btn px-6 py-4 rounded-t-2xl overflow-hidden shadow-xl fixed bottom-0 w-full mx-auto right-0 left-0"
      >
        <slot />
      </div>
    </transition>
  </div>
</teleport>

关键修改点 #

1. 移除外层冗余的<transition>，将遮罩层和内容层分别用独立的<transition>包裹，确保过渡逻辑独立触发
2. 给内容层过渡添加translate-y-full（初始状态：完全移出屏幕底部）和translate-y-0（最终状态：回到底部位置），实现滑出效果
3. 移除元素上自带的transform transition-all类，避免和Vue过渡类的动画属性冲突
4. 去掉<slot>上的v-if="show"，由外层容器的v-show统一控制显示状态

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