javascript - 如何在 Typescript/React 中使用 Tailwind 动画增加进度条宽度

Question

我有一个简单的进度条组件，如下所示，我想添加动画，比如增加宽度0% to 100%一次stepCount > 0是真的。（即使用s.stepBarProgressed）

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

那么我的顺风css是这样的

.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;
}

我尝试添加如下所示的 eventlistner，但它不起作用 - 我可以使用 Tailwind 或使用 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)
  })
}

标签： javascriptreactjstypescriptanimationtailwind-css