需求：點(diǎn)擊icon圖標(biāo)，旋轉(zhuǎn)一周有一個(gè)過渡的效果。

實(shí)現(xiàn) 第一種實(shí)現(xiàn)ElementUI刷新動(dòng)畫

根據(jù)添加不同的css樣式來進(jìn)行過渡動(dòng)畫

<i :class="[refresh? 'el-icon-refresh refreshIcon' : 'el-icon-refresh']" @click="isRotate"></i> .refreshIcon {transform: rotate(360deg);transition: all 1s; // 可配置 } data{return {refreshIcon:false // 根據(jù)boolean值對(duì)樣式進(jìn)行更替} }, methods:{iconClick(){this.refreshIcon = !this.refreshIcon;setTimeout(() => {this.refreshIcon = !this.refreshIcon;},1000)} }

實(shí)現(xiàn) 第二種實(shí)現(xiàn)Ant Design Vue刷新動(dòng)畫

不管是elementUI和Ant Design Vue組件庫(kù)，兩者邏輯都是一樣的，根據(jù)不同的css樣式來進(jìn)行旋轉(zhuǎn)效果更多效果可以參考菜鳥教程

結(jié)語：其實(shí)不管是Vue還是React實(shí)現(xiàn)刷新動(dòng)畫皆可使用這種方式，代碼會(huì)變化但是實(shí)現(xiàn)思路是不變的。

總結(jié)

以上是生活随笔為你收集整理的vue实现icon刷新动画的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。