如何在Vue.js发起API调用时为绑定点击事件的元素添加CSS动画

实现方案 #

核心思路是用响应式状态控制FontAwesome自带的fa-spin旋转类，配合Promise.race同时监听API请求和2秒超时逻辑，满足任意一个条件就停止旋转。 #

1. 修改模板代码

给图标动态绑定fa-spin类，同时把当前item传入更新方法：

<i 
  class="fas fa-sync" 
  :class="{ 'fa-spin': item.isUpdating }" 
  @click.prevent="updateCart(item.id, item.amount, item)"
></i>

2. 改写updateCart方法

用Promise.race包装API请求和2秒延时，最终无论哪种情况都在finally里关闭旋转状态：

async function updateCart(id, amount, item) {
  // 启动旋转
  item.isUpdating = true
  // Vue2 环境如果isUpdating是后加的字段，要换成 this.$set(item, 'isUpdating', true) 保证响应式

  try {
    await Promise.race([
      // 替换成你实际的API请求逻辑
      fetch(`/api/cart/update/${id}`, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ amount })
      }),
      // 2秒超时控制
      new Promise(resolve => setTimeout(resolve, 2000))
    ])
    // 这里可以加请求成功后的业务逻辑，比如提示更新成功
  } catch (err) {
    // 这里加错误处理逻辑，比如报错提示
    console.error('购物车更新失败', err)
  } finally {
    // 无论请求成功/失败/超时，都停止旋转
    item.isUpdating = false
    // Vue2 环境对应换成 this.$set(item, 'isUpdating', false)
  }
}

可选：自定义旋转速度

如果觉得默认旋转速度不符合需求，可以加CSS覆盖默认配置：

.fa-sync.fa-spin {
  animation-duration: 0.8s; /* 数值越小转得越快 */
}

内容的提问来源于stack exchange，提问作者magic bean