CSS3实现点击刷新按钮旋转的特效

效果图：

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

源码

<template>
    <img 
        src="/img/refresh.png"
        :class="[cpuImgRotate ? 'rotating' : 'non-rotating']"
        @click="toDoRefresh"
        @animationend="reset"
    />
</template>
<script>
    export default{
        data(){
            cpuImgRotate: false;
        },
        methods:{
            toDoRefresh(){
                this.cpuImgRotate  = true;
            },
            reset() {
                this.cpuImgRotate = false;
            }
        }
    }
</script>
 
<style>
.non-rotating {}
.rotating {
    animation-name: rotating;
    animation-duration: 1s;
    animation-iteration-count: 1;
}
@keyframes rotating {
    from { transform: rotate(0deg);}
    to { transform: rotate(-360deg);}
}
</style>

关键点：

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

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