refresh图标旋转css控制

环境：vue2、css

效果如下：

 实现思路：img点击后旋转，同时触发数据更新，旋转停止后，可以重复refresh操作。

 实现代码：

<img 
    src="/img/refresh.png"
    :class="[cpuImgRotate ? 'rotating' : 'non-rotating']"
    @click="toDoRefresh"
    @animationend="reset"
/>

cpuImgRotate  = false;

reset() {
        this.cpuImgRotate = false;
    }

.non-rotating {}
.rotating {
    animation-name: rotating;
    animation-duration: 1s;
    animation-iteration-count: 1;
}
@keyframes rotating {
    from { transform: rotate(0deg);}
    to { transform: rotate(-360deg);}
}

 关键点：

①@animationend使用，实现图标旋转停止后的控制，否则无法重复refresh旋转的过程

②rotating样式类，此处为图片旋转的控制实现

注意点：

在接口调用数据时，控制css类转换，会没有效果，同时无法把握图片旋转结束后，刷新数据，会有冲突情况