Javascript 如何将垂直计数器设置为当前活动编号的动画？

我有5张幻灯片，开始时，当第一张幻灯片处于活动状态时，计数器应显示

01/05

。当以后的幻灯片发生变化时，例如，如果第三张幻灯片变为可见，则

03

会使class

处于活动状态

（我已经这样做了），计数器应显示

03/05

如何将当前幻灯片编号设置为动画

我玩过

transform:translateY（）

，还有比这更好的方法吗？如果没有，我如何倾听孩子们的声音（当跨度变为活动类时）并为变换计算正确的像素大小

CSS

HTML

01
02
03
04
05
/
05

当我访问代码笔时，我得到了一个无限的加载循环。我使用的是ChromeV67。有时我也会这样，我不知道为什么，但当我在Chrome中更改用户（其他用户或客户）时，它运行良好

.info {
  position: fixed;
  top: 50%;
  left: 50%;
  display: block;
  font-size: 20px;
  //overflow: hidden;
  border: 1px solid #333;
  width: 35px;
  padding-left: 22px;
  text-align: center;
  &__current {
    display: flex;
    flex-direction: column;
    position: absolute;
    left: 0;
    transition: all 200ms;
    transform: translateY(-47px);
  }
}

<div class="info">
    <span class="info__current">
        <span>01</span>
        <span>02</span>
        <span class="active">03</span>
        <span>04</span>
        <span>05</span>
    </span>
    <span class="info__separator">/</span>
    <span class="info__total">05</span>
</div>