vue图标旋转
需求是当我们点击图标进行请求数据的时候,图标进行旋转,成功之后停止旋转,请求超时也会自动停止旋转1.HTML<div class="refresh" icon="el-icon-refresh" @click="refresh()"><img src="../assets/img/refresh.png" :class="[isRotate?'rotate':'rotat...
·
需求是当我们点击图标进行请求数据的时候,图标进行旋转,成功之后停止旋转,请求超时也会自动停止旋转
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);
}
}
更多推荐
已为社区贡献8条内容
所有评论(0)