vue实现icon刷新动画

实现点击icon图标，旋转一周

 

通过ElementUI实现刷新动画

<i :class="[refresh_flag? 'el-icon-refresh refreshIcon' : 'el-icon-refresh']" @click="refreshClick"></i>

refreshClick点击时refresh_flag状态为true，接口数据返回成功后再变为false

 

.refreshIcon {
  transform: rotate(360deg);
  transition: all 1s;
}

refresh_flag状态为true，使icon旋转一周

 

data{
    return {
        refresh_flag: false
    }
},
methods:{
    refreshClick(){
        this.refresh_flag = !this.refresh_flag;

        // 执行代码逻辑
        ......

        setTimeout(() => {
            this.refresh_flag = !this.refresh_flag;
        },1000)
    }
}