使用 Tailwind 和 Next 创建显示/隐藏过渡

Question

有没有办法使用 Tailwind 和 Next 的条件代码创建显示或可见性转换？我正在尝试这样的事情，我想要实现的是当后端在responseError对象下返回异常消息（使用Next中的Context）时平滑淡出效果，但根本没有过渡效果：

{
  responseError ?
    <span className={`${ responseError ? "visible transition-all ease-in-out delay-150 duration-300" : "invisible"} pt-4 text-sm text-red-500 font-['Poppins'] font-bold `}>
       username or password incorrect
     </span>
  : null
 }

或者

{
  responseError ?
    <span className={`${ responseError ? "visible transition-all ease-in-out delay-150 duration-300" : "invisible"} pt-4 text-sm text-red-500 font-['Poppins'] font-bold `}>
       { responseError.message }
    </span>
  : null
}

Answer 1

使用opacity而不是visibility.

这个堆栈溢出答案解决了您面临的类似问题。简而言之，该visibility属性有两个可能的值：可见或隐藏。另一方面，opacity可以介于 0 和 1 之间，因此在使用该属性时可以应用适当的关键帧transition。

作为旁注，我注意到您正在检查两次responseError，一次是为了渲染，<span>另一次是为了应用顺风类。这将导致您的淡入过渡仅在淡入时起作用，因为<span>仅在存在时才渲染responseError。相反，尝试这样的事情：

<span className={`${ responseError ? "opacity-100" : "opacity-0"} transition-opacity ease-in-out delay-150 duration-300 pt-4 text-sm text-red-500 font-['Poppins'] font-bold `}>
   { responseError ? responseError.message : '' }
</span>