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

Question

是否有任何方法在Next使用Tailwind和条件代码创建显示或可见性过渡?我正在尝试这样的东西，我想要实现的是一个平滑的淡出效果，当后端返回一个异常消息下的responseError对象(使用上下文在下一步)，但没有过渡效果:

{
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>