API 호출 시 vue.js에 css 애니메이션을 추가하는 방법

API 호출 시 vue.js에 css 애니메이션을 추가하는 방법

아이콘을 사용하는 중이고 클릭할 때 API를 호출:

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

그래서 API 호출이 끝날 때까지 애니메이션으로 2초간 돌리고 싶다.하지만 어떻게 해야 할지 잘 모르겠으니, 네가 나에게 좋은 해결책을 주면 좋겠어.

예를 들어 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) }
}

참조URL: https://stackoverflow.com/questions/69809504/how-to-add-css-animation-to-vue-js-when-api-call-is-making