如何让Tailwind的旋转过渡效果正常生效？

问题根源 #

初始渲染时，rotate-180类是直接绑定到元素上的，此时元素没有预设的初始transform状态，导致过渡效果无法被触发。Tailwind的过渡类需要元素有明确的初始属性值作为过渡起点，才能在属性变化时生效。

修复代码 #

给容器添加默认的rotate-0类，确保初始状态有明确的transform值，这样切换到rotate-180时就能正常触发过渡：

<div
  class="w-[18px] ml-6 mr-2 text-slate-500 transition-all rotate-0"
  :class="{ 'rotate-180': store.accountMenu }">
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
    <path
      fill="none"
      stroke="currentColor"
      stroke-linecap="round"
      stroke-linejoin="round"
      stroke-width="2"
      d="M20 6L10 16l10 10" />
  </svg>
</div>

额外排查点 #

如果修复后仍有问题，可以检查：

• 确认store.accountMenu不是在组件挂载瞬间从false变为true（异步赋值场景下，要保证元素渲染完成后再修改状态）
• 可将transition-all替换为更精准的transition-transform duration-300，明确指定过渡属性和时长，避免其他属性过渡产生干扰

内容的提问来源于stack exchange，提问作者Artur Müller Romanov