How to add css animation to vue.js when API call is making-CodePudding

I am using an icon and I am making an API call when it is clicked:

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

So I want to turn it with animation till the API call is done or for two seconds.But I am not sure how to do that, so if you could give me a solution that would be great.

CodePudding user response：

You could simply toggle a CSS animation (or class that runs the animation), for example using:

const MyIcon = Vue.extend({
  template: `
    <i  :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)
    }
  }
})

Where spin might be something like:

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