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

【问题标题】：How can I bind the animation duration in Vue.js?如何在 Vue.js 中绑定动画持续时间？
【发布时间】：2019-01-28 04:19:07
【问题描述】：

我正在尝试构建（而不是使用现有解决方案）的是具有以下模板的不确定加载器：

<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 getter，这样我就可以将动画持续时间（当前设置为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"
    };
  }

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

我想不出任何其他方式来做到这一点。有什么想法吗？

【问题讨论】：

奇怪，小提琴工作正常，但我的代码却不行 :-( 除非使用 Typescript 有所作为？让我再深入一点。
原来是 scoped CSS。当keyframes 在作用域 CSS 内时，看起来Vue 不喜欢内联动画。

标签： vue.js

【解决方案1】：

这就是我在 vue 3 的进度条上绑定动画持续时间的方式，作为之前的响应。有必要删除style上的scope

<template>
...
  <div v-if="duration > 0" class="w-full bg-gray-200 -mb-1">
    <div
      :class="`progress-bar h-0.5 progress-bar-${themeColor}`"
      :style="animation"
    ></div>
  </div>
...
</template>

<script lang="ts">
    ...
    props: {
        duration: {
            type: Number,
            default: 10,
        },
        themeColor: {
           type: String,
           required: false,
           default: "blue",
        },
    },
    computed: {
        animation(): string {
          return `animation: ${this.duration}s linear theme-color, ${this.duration}s ease-out enter forwards`;
        },
    },
    ...
<script>

<style lang="scss">
.progress-bar {
  @apply bg-gray-300;
  transform-origin: right;

  &.progress-bar-blue {
    @apply bg-gradient-to-r from-blue-600 to-blue-300;
  }

  &.progress-bar-green {
    @apply bg-gradient-to-r from-green-600 to-green-300;
  }

  &.progress-bar-yellow {
    @apply bg-gradient-to-r from-yellow-600 to-yellow-300;
  }

  &.progress-bar-red {
    @apply bg-gradient-to-r from-red-500 to-red-300;
  }
}

@keyframes theme-color {
  100% {
    background-position: 0%;
  }
  0% {
    background-position: 100%;
  }
}

@keyframes enter {
  100% {
    transform: scaleX(0);
  }
  0% {
    transform: scaleX(1);
  }
}
</style>

【讨论】：