vue 刷新icon小动效
点击icon图标,旋转一周。最先尝试的逻辑是,给一个控制参数refresh,初始false,icon绑定两个样式,类似以下:<i :class="[refresh? 'el-icon-refresh go' : 'el-icon-refresh']" @click="iconClick"></i> el-icon-refresh是elementui自带图标
·
点击icon图标,旋转一周。
最先尝试的逻辑是,给一个控制参数refresh,初始false,icon绑定两个样式,类似以下:
<i :class="[refresh? 'el-icon-refresh go' : 'el-icon-refresh']" @click="iconClick"></i> 
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> 
.go {
transform: rotate(360deg);
transition: all 1s;
}
data{
refresh:false,
}
...
methods:{
iconClick(){
this.refresh = !this.refresh;
setTimeout(() => {
this.refresh = !this.refresh;
},1000)
}
}
不在接口返回中设置false,让延迟时间等于transition时间即可。
如果有更好的办法欢迎交流。
更多推荐
已为社区贡献2条内容
所有评论(0)