Vue2+Nuxt环境下Tailwind过渡效果在Modal组件中失效求助

你的问题核心在于Vue Transition组件没有正确绑定到被条件控制显示/隐藏的元素上，结合代码细节，调整方式如下：

问题分析 #

1. 父组件Feed.vue中，你把v-if="showModal"加在了Modal的外层div上，这会导致整个Modal组件被挂载/卸载，内部的Transition组件无法正确监听元素的插入/移除过程（组件初始化时的渲染不会触发Transition的钩子）。
2. Modal.vue中的Transition组件没有直接包裹带有条件渲染指令（v-if/v-show）的元素，缺少触发过渡的核心条件。
3. 外层div的to="modals"是无效属性，可能干扰正常渲染。

修改步骤 #

1. 调整Feed.vue结构 #

移除外层div的v-if和无效的to属性，让Modal组件始终存在，通过传入的show prop控制内部显示：

<FeedItem @click.native="showDetails(post)" />

<div>
  <Modal
    :post="selectedItem"
    :show="showModal"
    @close-modal="closeModal"
  />
</div>

2. 修复Modal.vue的Transition绑定 #

让Transition组件直接包裹带有v-show（或v-if）的Modal容器，绑定传入的show prop来触发过渡：

<template>
  <transition
    enter-active-class="transition-opacity ease-linear duration-300"
    enter-class="opacity-0"
    enter-to-class="opacity-100"
    leave-active-class="transition-opacity ease-linear duration-300"
    leave-class="opacity-100"
    leave-to-class="opacity-0"
  >
    <!-- 用v-show绑定show prop，触发Transition的显示/隐藏过渡 -->
    <div v-show="show" class="fixed inset-0 bg-black/50 flex items-center justify-center">
      <!-- 你的Modal内容 -->
      <div class="bg-white p-6 rounded-lg shadow-xl">
        <h3 class="text-xl font-bold mb-4">{{ post.title }}</h3>
        <p>{{ post.content }}</p>
        <button 
          @click="$emit('close-modal')"
          class="mt-4 px-4 py-2 bg-gray-200 rounded"
        >
          关闭
        </button>
      </div>
    </div>
  </transition>
</template>

<script>
export default {
  props: {
    show: {
      type: Boolean,
      required: true
    },
    post: {
      type: Object,
      required: true
    }
  }
}
</script>

额外说明 #

• 如果你偏好使用v-if而非v-show，只需把v-show="show"换成v-if="show"即可，两种指令都能触发Vue Transition。
• 确保Tailwind的过渡类（transition-opacity、duration-300等）被正确打包，由于你其他Tailwind样式正常，这一步大概率没问题。

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