vue实现icon刷新动画

需求：点击icon图标，旋转一周有一个过渡的效果。

实现 第一种实现ElementUI刷新动画

根据添加不同的css样式来进行过渡动画

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

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

data{
	return {
        refreshIcon:false // 根据boolean值对样式进行更替
    }
},
methods:{
	iconClick(){
		this.refreshIcon = !this.refreshIcon;
		setTimeout(() => {
			this.refreshIcon = !this.refreshIcon;
		},1000)
	}
}

实现 第二种实现Ant Design Vue刷新动画

不管是elementUI和Ant Design Vue组件库，两者逻辑都是一样的，根据不同的css样式来进行旋转效果更多效果可以参考菜鸟教程

结语：其实不管是Vue还是React实现刷新动画皆可使用这种方式，代码会变化但是实现思路是不变的。