Question

我要构建的（不使用现有解决方案）是带有以下模板的不确定的加载器：

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

然后，我使用getter为带有line类的div添加样式（效果很好）。

  @Prop({ default: "hsl(0, 0%, 90%)" }) private backColor!: string;
  ...
  public get getLineStyle(): any {
    return {
      "background-color": "black",
      position: "absolute",
      opacity: "0.4",
      background: this.backColor,
      width: "150%",
      height: "100%"
    };
  }

我还有以下 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>

我想要做的是也将.inc和.dec类也转换为property吸气剂，以便可以将动画持续时间（当前设置为2s）绑定到一个属性。

我最初尝试将模板修改为：

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

仅当意识到内联添加动画时无法正常工作。

我想不出其他任何方法。有什么想法吗？

如何在Vue.js中绑定动画时长？

0 个答案: