进行 API 调用时如何将 css 动画添加到 vue.js

Posted 2023-02-16

【中文标题】进行 API 调用时如何将 css 动画添加到 vue.js

【英文标题】：How to add css animation to vue.js when API call is making

【发布时间】：2021-12-16 22:14:38

【问题描述】：

我正在使用一个图标，并在单击它时进行 API 调用：

 <i class="fas fa-sync" @click.prevent="updateCart(item.id, item.amount)"></i>

所以我想用动画打开它，直到 API 调用完成或两秒钟。但我不知道该怎么做，所以如果你能给我一个很棒的解决方案。

【参考方案1】：

您可以简单地切换 CSS 动画（或运行动画的类），例如使用：

const MyIcon = Vue.extend(
  template: `
    <i class="fas fa-sync" :style="(loading ? 'animation: spin 1s infinite;' : '')" @click.prevent="updateCart"></i>
  `,
  data() 
    return 
      loading: false,
    
  ,
  methods: 
    updateCart() 
      this.loading = true
      // Do your stuff here and set to false when you're done
      setTimeout(() => this.loading = false, 2000)
    
  
)

旋转可能是这样的：

@keyframes spin 
    from  transform: rotateZ(0deg) 
    to  transform: rotateZ(360deg)