如何设置动画状态完成

Question

我创建了一个滑块动画，如下所示：

@mixin progress {
  @-webkit-keyframes interval {
    from {
      width: 0;
    }
    to {
      width: 100%;
    }
  }
  animation: var(--duration) linear 0s interval;
  animation-play-state: var(--playState);
}
 .slider-item {
   @include progress;
 }

当点击事件触发时，我的任务是完成当前的滑块动画。 我试图选择目标元素，例如：

this.$refs[`slider-item-${id}`]

尽管如此，动画属性仍然是空的，我在这里缺少什么吗？还是有更好的选择？ （我试过 API https://developer.mozilla.org/en-US/docs/Web/API/Element/animate 没有成功）

Answer 1

尝试替换

animation: var(--duration) linear 0s interval;

与

animation: var(--duration) linear 10ms forwards;

将动画结束视为页面上剩余的最后一个状态。