如何将垂直计数器动画化为当前活动编号？

Question

我有5张幻灯片，并且在第一张幻灯片处于活动状态时开始时，计数器应显示01 / 05。当以后的幻灯片更改时，例如，如果第三张幻灯片变为可见，则<span>03</span>会获得active类（我已经这样做了），并且计数器应显示03 / 05。

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

我玩过transform: translateY()，还有没有比这更好的方法了？如果不是，我该如何收听孩子（跨度活跃的班级），并计算正确的像素大小以进行变换？

https://codepen.io/anon/pen/zajBbN

CSS

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

HTML

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