如何在Vue.js中绑定动画持续时间？

我试图构建（而不是使用现有解决方案）的是一个具有以下模板的不确定加载程序：

<template>
  <div class="slider">
    <div class="line" :style="getLineStyle"></div>
    <div class="subline inc"></div>
    <div class="subline dec"></div>
  </div>
</template>

我还有以下CSS：

使用以下getter：

  public get getAnimateIncreaseStyle() {
    return {
      animation: "increase 2s infinite"
    };
  }

  public get getAnimateDecreaseStyle() {
    return {
      animation: "decrease 2s 0.5s infinite"
    };
  }

只有认识到，动画无法工作时，添加内联

---

我想不出任何其他方法来做这件事。有什么想法吗？

奇怪，小提琴很好用，但我的代码却不行：-（除非使用

Typescript

会有所不同？让我再深入一点。结果是作用域

CSS

。看起来

Vue

不喜欢

关键帧
在作用域
CSS
内的内联动画。
<style lang="scss" scoped>
.slider {
  position: relative;
  height: 2px;
  overflow-x: hidden;
}

.subline {
  position: absolute;
  background: #4a8df8;
  height: 100%;
}

.inc {
  animation: increase 2s infinite;
}

.dec {
  animation: decrease 2s 0.5s infinite;
}

@keyframes increase {
  from {
    left: -5%;
    width: 5%;
  }
  to {
    left: 130%;
    width: 100%;
  }
}
@keyframes decrease {
  from {
    left: -80%;
    width: 80%;
  }
  to {
    left: 110%;
    width: 10%;
  }
}
</style>

<template>
  <div class="slider">
    <div class="line" :style="getLineStyle"></div>
    <div class="subline inc" :style="getAnimateIncreaseStyle"></div>
    <div class="subline dec" :style="getAnimateDecreaseStyle"></div>
  </div>
</template>

  public get getAnimateIncreaseStyle() {
    return {
      animation: "increase 2s infinite"
    };
  }

  public get getAnimateDecreaseStyle() {
    return {
      animation: "decrease 2s 0.5s infinite"
    };
  }