需求：點擊icon圖標，旋轉一周有一個過渡的效果。

實現 第一種實現ElementUI刷新動畫

根據添加不同的css樣式來進行過渡動畫

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

實現 第二種實現Ant Design Vue刷新動畫

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

結語：其實不管是Vue還是React實現刷新動畫皆可使用這種方式，代碼會變化但是實現思路是不變的。

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。