如何用Tailwind与Next.js实现显示/隐藏过渡动画？

你的代码没生效的核心问题有两个：

1. visible/invisible 是瞬时切换的属性，不支持CSS过渡，无法触发平滑动画；
2. 外层的 responseError ? <span> : null 会直接挂载/卸载元素，元素没有机会执行过渡动画。

下面提供两种可行的解决方案：

方案一：保留DOM元素，通过透明度实现过渡 #

不直接卸载元素，而是用 opacity（可过渡属性）配合 visibility 控制显示隐藏，同时保留过渡效果：

<span className={`transition-all ease-in-out delay-150 duration-300 pt-4 text-sm text-red-500 font-['Poppins'] font-bold 
  ${responseError ? 'opacity-100 visible' : 'opacity-0 invisible pointer-events-none'}`}>
  {responseError?.message || 'username or password incorrect'}
</span>

说明： #

• opacity-100/opacity-0 控制元素透明度，这是支持过渡的属性，Tailwind的 transition-all 会包含它的动画；
• visible/invisible 用来在透明度切换完成后，彻底隐藏元素的交互（配合 pointer-events-none 防止点击到隐藏的元素）；
• 不需要外层的条件判断，元素始终存在于DOM中，通过类名切换实现过渡。

方案二：按需卸载DOM元素，控制过渡时机 #

如果希望在错误消失时完全移除元素，可以通过React状态控制过渡阶段，等待动画完成后再卸载：

import { useState, useEffect } from 'react';

// 组件内部逻辑
const [showError, setShowError] = useState(false);

useEffect(() => {
  if (responseError) {
    // 错误出现时立即显示元素
    setShowError(true);
  } else {
    // 错误消失时，先执行淡出动画，再卸载元素
    const timer = setTimeout(() => setShowError(false), 300);
    return () => clearTimeout(timer);
  }
}, [responseError]);

// 渲染部分
return (
  <>
    {showError && (
      <span className={`transition-all ease-in-out delay-150 duration-300 pt-4 text-sm text-red-500 font-['Poppins'] font-bold 
        ${responseError ? 'opacity-100 visible' : 'opacity-0 invisible'}`}>
        {responseError?.message || 'username or password incorrect'}
      </span>
    )}
  </>
);

说明： #

• 用 showError 状态控制元素是否挂载；
• 监听 responseError 的变化：错误出现时立即显示元素，错误消失时等待300ms（对应过渡时长）再卸载，确保淡出动画执行完成；
• 类名切换逻辑和方案一一致，通过透明度实现平滑过渡。

内容的提问来源于stack exchange，提问作者Sander dos Santos Zuchinalli