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

Question

我正在使用一个图标，当它被点击时我正在调用 API:

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

所以我想用动画来转动它，直到 API 调用完成或持续两秒钟。但我不确定该怎么做，所以如果你能给我一个解决方案，那就太好了。

Answer 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) }
}