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

【问题标题】：animation not working with condition in className with tailwindcss动画不适用于带有tailwindcss的className中的条件
【发布时间】：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>

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

【问题讨论】：

标签： reactjs next.js tailwind-css

【解决方案1】：

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

【讨论】：