点击icon图标,旋转一周。
最先尝试的逻辑是,给一个控制参数refresh,初始false,icon绑定两个样式,类似以下:

<i :class="[refresh? 'el-icon-refresh go' : 'el-icon-refresh']" @click="iconClick"></i>&emsp;

el-icon-refresh是elementui自带图标

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

iconClick点击时refresh状态为true,接口数据返回成功后再变为false

逻辑是没毛病的,但是transition给的时间时1s,接口速度小于1s时,点击起来就会很奇怪,icon还未旋转完就被强行终止,甚至只是抖动一下,操作起来感觉像喉咙里卡了一口浓痰。

优化如下:

<i :class="[refresh? 'el-icon-refresh go' : 'el-icon-refresh']" @click="iconClick"></i>&emsp;
.go {
  transform: rotate(360deg);
  transition: all 1s;
}
data{
	refresh:false,
}
...
methods:{
	iconClick(){
		this.refresh = !this.refresh;
		setTimeout(() => {
			this.refresh = !this.refresh;
		},1000)
	}
}

不在接口返回中设置false,让延迟时间等于transition时间即可。
如果有更好的办法欢迎交流。

Logo

前往低代码交流专区

更多推荐