Estoy usando un ícono y estoy haciendo una llamada a la API cuando se hace clic en él:
<i class="fas fa-sync" @click.prevent="updateCart(item.id, item.amount)"></i>Así que quiero activarlo con animación hasta que se complete la llamada a la API o durante dos segundos. Pero no estoy seguro de cómo hacerlo, así que si pudiera darme una solución, sería genial.
Simplemente puede alternar una animación CSS (o la clase que ejecuta la animación), por ejemplo, usando:
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) } } })Donde el giro podría ser algo como:
@keyframes spin { from { transform: rotateZ(0deg) } to { transform: rotateZ(360deg) } }