Css 如何使用JS为计时器卡设置边框动画

我为我正在制作的计时器应用程序准备了下面的计时器卡，我希望在它倒计时时有一个边框慢慢环绕它，就像这支笔一样。 进度必须由JS控制

我将VueJS与Vuetify一起使用，下面是我的代码

      <v-col
          cols="12"
         sm="4"
         xs="4" v-for="timer in formattedTimers" :key="timer.id">

    <v-card :class="{jiggle : editmode}" max-width="200" class="mx-auto" outlined>
      <v-list-item three-line>
        <v-list-item-content>
          <div class="headline mb-8 text-center">{{ timer.name }}</div>
          <v-list-item-title class="headline mb-4 text-center">{{ parseTime(timer.timeLeft) }}</v-list-item-title>
        </v-list-item-content>
      </v-list-item>

      <v-card-actions>
        <div v-if="!editmode">
          <v-btn @click="zeroTimer(timer.id)" left>Zero</v-btn>
          <v-btn color="primary" @click="resetTimer(timer.id)" right absolute>Reset</v-btn>
        </div>
        <div v-else>
          <v-btn color="primary" @click="deleteTimer(timer.id)" left>Delete</v-btn>
        </div>
      </v-card-actions>
    </v-card>
  </v-col>

{{timer.name}
{{parseTime（timer.timeLeft）}
零
重置
删除

有几种制作动画边框的技术。其中一项： 您可以在框内创建四个空跨度标记：

<v-card>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
</v-card>

---

他们代表边境。它们应该绝对定位在卡上。然后，您应该提供一个关键帧无限动画，逐个调整跨度的宽度。所有这些css逻辑都应该绑定到一个类。然后在Vue组件中，根据计数器逻辑动态应用该类。

您可以直接使用所附的SVG

为了在单击重置时重新渲染边框图像，一个技巧是向SVG字符串添加空白，然后将其转换为base64

下面是一个简单的片段：

Vue.component（'v-timer'{
渲染（h）{
返回h（'div'{
风格：{
边框：“10px纯黑”，
borderImage:`url（“数据：image/svg+xml；base64，${this.computedSVGUrl}”）1`
}
}，[h（'span'，{}，'${this.inner}Secs`），h（'button'{
关于：{
点击：（）=>{
this.inner=this.seconds
这是。空格+=“”
this.startTimer（this.seconds）
}
}
}，“重置”）]）
},
道具：{
“秒”：{
类型：数字，
默认值：0
}
},
数据（）{
返回{
空格：“”，
内部：0，
intervalCtrl:null
}
},
计算：{
computedSVGUrl:函数（）{
返回window.btoa（`path{animation:stroke${this.seconds}s linear；}@keyframes stroke{to{stroke dashoffset:388；}}}}${this.spaces}`）
}
},
观察：{
秒数：{
处理程序：函数（newVal）{
this.inner=newVal
这是startTimer（纽瓦尔）
},
立即：对
}
},
挂载：函数（）{
this.startTimer（this.seconds）
},
方法：{
起始计时器：功能（秒）{
这是resetInterval（）
this.intervalCtrl=setInterval（（）=>{
此值为0.1-=1
这是内线