用vue編寫帶動畫效果的toast

為了方便快速的使用動畫，我們可以使用現成的輪子–

npm install animate.css

import animated from

'animate.css'
let toast =
;toast.
install
=function
(vue,options);if
(options));
}    vue.prototype.
$toast
= op=>
elseif(
typeof op ===
'object'))
;//會儲存上次使用toast的text}if
(document.
getelementsbyclassname
("ys-toast"
).length)
let toasttemplate = vue.
extend(`
});let toastele =
newtoasttemplate()
.$mount()
.$el;
document.body.
(toastele)
;settimeout
(function()
,opt.duration);}
};export

import

from
'./plugins/toast/toast'
vue.
use(toast)
;//需要在new vue({})之前呼叫

所以我們需要在呼叫action的時候將this通過context引數傳進去，否則無法呼叫toast！畢竟外掛程式是install在vue原型上的==

setswiper

(,context)$`
}).then
(res=>res.
json()
).then
(data=>);
});commit
(set_swiper_list
,list);}
else})
.catch
(err=>`)
;       console.
error
("failed get swiperlist!"
,err)})
;

vue數字遞增的動畫效果

安裝 npm install vue count to s 使用 vue countto 簡單好用的乙個數字滾動外掛程式 在js裡面引入並且掛載到元件 import countto from vue count to components 在模板裡面使用 startval開始的數字 endval結束...

用原生js和vue元件寫乙個簡單的toast

樣式檔案 toast.css toast 複製 在toast.js檔案中的 import toast.css export function toast options const options console.log title var div document.createelement di...

用 CSS 實現酷炫的動畫充電效果

循序漸進，看看只使用 css 可以鼓搗出什麼樣的充電動畫效果。當然，電池充電，首先得用 css 畫乙個電池，這個不難，隨便整乙個 歐了，勉強就是它了。有了電池，那接下來直接充電吧。最最簡單的動畫，那應該是用色彩把整個電池灌滿即可。方法很多，也很簡單，直接看效果 有內味了，如果要求不高，這個勉強也就能...