动画不适用于带有tailwindcss的className中的条件

Posted 2023-03-07

【中文标题】动画不适用于带有tailwindcss的className中的条件

【英文标题】：animation not working with condition in className with tailwindcss

【发布时间】：2021-06-05 14:16:42

【问题描述】：

我试图找出为什么我的动画不工作，这是我的代码

   <button onClick=() =>  setPlaying(!playing) >
                        <div className=`text-white transition-all duration-150 -translate-y-0 $playing ? ' ' : '-translate-y-16'`>
                            <FontAwesomeIcon icon=faPlay className=`$playing ? 'block' : 'hidden'` />
                        </div>
                        <div  className=`text-white transition-all duration-150 translate-y-16 $ !playing ? '' : '-translate-y-0'`>
                            <FontAwesomeIcon  icon=faPause className=` playing:text-black $!playing ? 'block' : 'hidden'` />
                        </div>
                    </button>

有人知道为什么吗？提前谢谢

【参考方案1】：

在四处寻找之后错过了 className transform 以使其工作