Tailwind元素显示/隐藏时自定义过渡动画不生效如何解决？

你遇到的失效问题核心原因是 display 属性不属于CSS可过渡属性，切换 display: none 会直接将元素从渲染树中移除/插入，没有过渡中间帧，浏览器不会为此触发动画效果。

方案1：用可过渡属性替代display控制显隐 #

使用 opacity、transform、visibility 三个可过渡属性组合控制显隐，visibility: hidden 状态下元素不会响应交互，也不会透出遮挡下层内容，同时保留在渲染树中可以触发过渡：

<!-- 示例为Vue语法，其他框架可对应修改动态class逻辑 -->
<div 
  class="absolute top-0 inset-x-0 p-2 transition-[opacity,transform,visibility] transform origin-top-right"
  :class="showMenu 
    ? 'opacity-100 scale-100 visible duration-200 ease-out' 
    : 'opacity-0 scale-95 invisible duration-100 ease-in'"
>
  <!-- 菜单内容 -->
</div>

注意：要移除原代码中固定的duration-200 ease-out配置，改为动态切换进入/退出的动效参数，避免固定值覆盖退出时的100ms时长。

方案2：配合JS时序控制display切换 #

如果必须使用display控制显隐，可以通过JS手动控制动画时序，等过渡执行完成后再修改display属性：

// 显示逻辑
menuEl.style.display = 'block'
// 等待下一帧再添加进入状态，确保浏览器先完成display渲染
requestAnimationFrame(() => {
  menuEl.classList.add('opacity-100', 'scale-100')
})

// 隐藏逻辑
menuEl.classList.remove('opacity-100', 'scale-100')
// 监听过渡完成事件，再将元素设为display:none
menuEl.addEventListener('transitionend', () => {
  menuEl.style.display = 'none'
}, { once: true })

方案3：使用Headless UI Transition组件 #

Tailwind官方配套的Headless UI库提供了专门的Transition组件，自动处理进入/退出的状态时序，无需手动管理动画逻辑，直接按照你的需求配置参数即可：

import { Transition } from '@headlessui/react'

<Transition
  show={showMenu}
  enter="duration-200 ease-out"
  enterFrom="opacity-0 scale-95"
  enterTo="opacity-100 scale-100"
  leave="duration-100 ease-in"
  leaveFrom="opacity-100 scale-100"
  leaveTo="opacity-0 scale-95"
>
  <div class="absolute top-0 inset-x-0 p-2 transform origin-top-right">
    <!-- 菜单内容 -->
  </div>
</Transition>

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