vue實現乙個表示實時,載入中的動畫效果

2021-10-06 17:53:30 字數 869 閱讀 4162

前言:

用css實現的乙個表示實時效果的動畫,

效果圖展示:

實現**:(用的ivew的card)

1.template:

}

2.data裡面定義資料

alldevices:[,,

]},,,

]},,,

]},],

3.css樣式(很重要)

.line-scale-pulse-out-rapid.success > div 

.line-scale-pulse-out-rapid.null > div

.line-scale-pulse-out-rapid.fail > div

.line-scale-pulse-out-rapid>div

.line-scale-pulse-out-rapid>div:nth-child(2),.line-scale-pulse-out-rapid>div:nth-child(4)

.line-scale-pulse-out-rapid>div:nth-child(1),.line-scale-pulse-out-rapid>div:nth-child(5)

@-webkit-keyframes line-scale-pulse-out-rapid

80%} @keyframes line-scale-pulse-out-rapid

80%}

把這三部分放到元件中,效果就可以展示

CAShaplayer實現乙個載入動畫

思路 方法 建立乙個圖層,圖層要求圓形,可傳引數顏色 大小 方法 給圖層設定位置和整個載入動畫的大小 之後給其新增動畫,並且注意動畫的begintime要有間距 建立layer func createlayerwith size cgsize,color uicolor calayer let la...

vue彈窗載入另乙個外部vue頁面

在本頁面引入另乙個頁面,這裡不做過多的描述了,直接上 import empadd from components emp empadd export default data 彈窗事件 彈窗 showaddempview 彈窗頁面 彈出內容 data methods 在彈窗頁面操作完成之後,如果需要...

mvvm實現乙個簡單的vue

vue,基於mvvm模式下的乙個前端框架 mvvm模式下簡單的實現資料 資料劫持 1.是用object.defineproperty 實現資料 2.使用發布訂閱者模式,配合 object.defineproperty,實現資料劫持 資料劫持包括依賴收集和依賴促發 只考慮最簡單的方式,並且沒有包括具體...