Tengo un componente de barra de progreso simple como el siguiente y me gustaría agregar una animación como aumentar el ancho 0% to 100% una vez stepCount > 0 sea verdadero. (es decir, use s.stepBarProgressed )

 <div className={s.stepBarContainer}> <div className={s.stepBarDefault}> <div id="bar" className={stepCount > 0 ? s.stepBarProgressed : s.stepBarNoProgressed} /> </div> </div>

entonces mi css de viento de cola es así

 .stepBarContainer { @apply w-1/6 items-center content-center flex; } .stepBarDefault { @apply w-auto bg-gray-300 rounded items-center align-middle flex-1; } .stepBarProgressed { @apply animate-bounce; @apply bg-teal-main text-xs leading-none py-1 text-center text-gray-600 rounded; } .stepBarNoProgressed { @apply animate-bounce; @apply bg-gray-300 text-xs leading-none py-1 text-center text-gray-600 rounded; }

Intenté agregar eventlistner como a continuación, pero no funcionó. ¿De alguna manera puedo implementar de forma nativa dicha animación simplemente usando Tailwind o de todos modos con la función Typescript?

 const stepChange = () => { document.addEventListener('click', function() { let progress = 0 const intervalSpeed = 10 const incrementSpeed = 1 const bar = document.getElementById('bar') const progressInterval = setInterval(function() { progress += incrementSpeed bar!.style.width = `${progress}%` if(progress >= 100) { clearInterval(progressInterval) } }, intervalSpeed) }) }