vue图标旋转

需求是当我们点击图标进行请求数据的时候，图标进行旋转，成功之后停止旋转，请求超时也会自动停止旋转

1.HTML

<div class="refresh" icon="el-icon-refresh" @click="refresh()">
	<img src="../assets/img/refresh.png" :class="[isRotate?'rotate':'rotate1']" style="border-radius: 50%;width: 100%;" />
</div>

2.JS

data() {
	return {
		isRotate: false, //旋转图标
	}
},


//点击事件
refresh() {
    //点击的时候为true
	this.isRotate = true;
	axios.get(global.globalApi() + '/users')
		.then((res) => {
			if(res.status == 200) {
			    //成功之后为true
				this.isRotate = false
			}
		})
		.catch((err) => {
				//失败之后也为true
				this.isRotate = false; 
		});
},

3.CSS

.refresh {
	position: absolute;
	left: 50%;
	bottom: 4px;
	transform: translateX(-50%);
	cursor: pointer;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	text-align: center;
	line-height: 40px;
	background: #fff;
	box-shadow: 0px 1px 10px 3px #eaeaea;
}
.rotate {
	animation: mymove 1s infinite;
	-webkit-animation: mymove 1s infinite;
}

@keyframes mymove {
	from {
		transform: rotate(0deg);
	}
	to {
		transform: rotate(360deg);
	}
}