javascript - 如何设置动画状态完成

Question

我创建了一个 slider 动画，如下所示:

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

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

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;

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