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

Question

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

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

有谁知道为什么？提前谢谢

Answer 1

再四处寻找后，缺少类名 transform 才能正常工作

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

animation not working with condition in className with tailwindcss

reactjs

next.js

tailwind-css