CODEWITHSUNDEEP
reactjsnext.jstailwind-css
Maxime Ghéraille
Maxime Ghéraille

Reputation: 1895

animation not working with condition in className with tailwindcss

I am trying to find out why my animation is not working, this is my code

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

Does anyone know why ? thx in advance

Upvotes: 1

Views: 1207

Answers (1)

Maxime Gh&#233;raille
Maxime Gh&#233;raille

Reputation: 1895

After some more looking around missing the className transform for it to work

Upvotes: 3

Related Questions