Vue3實(shí)現(xiàn)優(yōu)雅加載圖片的動(dòng)畫效果
更新時(shí)間：2023年10月08日 10:16:20 作者：萌萌噠草頭將軍
這篇文章主要為大家詳細(xì)介紹了Vue3如何實(shí)現(xiàn)加載圖片時(shí)添加一些動(dòng)畫效果,文中的示例代碼講解詳細(xì),具有一定的借鑒價(jià)值,有需要的小伙伴可以參考下
這篇文章是緊接上篇的內(nèi)容，Vue3如何優(yōu)雅的加載大量圖片
上篇文章，我們只是簡(jiǎn)單增加了一個(gè)漸變的效果。
這篇文章，我分享兩個(gè)新的動(dòng)畫：
高斯模糊效果
function callback(
entries: IntersectionObserverEntry[],
observer: IntersectionObserver
) {
entries.forEach((entry) => {
if (entry.intersectionRatio <= 0) return;
const img = entry.target as HTMLImageElement;
const src = img.getAttribute("data-src");
img.setAttribute("src", src ?? ""); // 將真實(shí)的圖片地址賦給 src 屬性
img.onload = () => {
img.setAttribute("class", "fade-in");
};
observer.unobserve(img);
});
}對(duì)應(yīng)的樣式
@keyframes fadeIn {
from {
filter: blur(10px);
}
to {
filter: blur(0px);
}
}
.fade-in {
animation: fadeIn 0.3s ease-in;
}效果如下：
縮放動(dòng)畫
img.onload = () => {
img.setAttribute("class", "transform-in");
};對(duì)應(yīng)的樣式
@keyframes bounce-in {
0% {
transform: scale(0.8);
}
100% {
transform: scale(1);
opacity: 1;
}
}
.transform-in {
opacity: 0;
animation: bounce-in 0.5s ease-in-out forwards;
}效果如下
到此這篇關(guān)于Vue3實(shí)現(xiàn)優(yōu)雅加載圖片的動(dòng)畫效果的文章就介紹到這了,更多相關(guān)Vue3加載圖片內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要介紹了vue 子組件watch監(jiān)聽不到prop的解決，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來(lái)看看吧2020-08-08
vue.js整合vux中的上拉加載下拉刷新實(shí)例教程
這篇文章主要給大家介紹了關(guān)于vue.js整合vux中上拉加載下拉刷新的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧。2018-01-01
Vite使用unplugin-auto-import實(shí)現(xiàn)vue3中的自動(dòng)導(dǎo)入
本文主要介紹了Vite使用unplugin-auto-import實(shí)現(xiàn)vue3中的自動(dòng)導(dǎo)入,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2024-06-06
Vue3中多個(gè)彈窗同時(shí)出現(xiàn)的解決思路
這篇文章主要介紹了Vue3中多個(gè)彈窗同時(shí)出現(xiàn)的解決思路,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-02-02
Vue中進(jìn)行分布式鑒權(quán)與認(rèn)證的過程
在Vue應(yīng)用中，我們通常需要實(shí)現(xiàn)分布式鑒權(quán)和認(rèn)證，以確保用戶的安全性和數(shù)據(jù)的保密性，本文將介紹在Vue中如何進(jìn)行分布式鑒權(quán)與認(rèn)證,需要的朋友可以參考下2023-06-06
組件(Component)是Vue.js最強(qiáng)大的功能之一。組件可以擴(kuò)展HTML元素，封裝可重用的代碼，本文將詳細(xì)介紹Vue組件基礎(chǔ)用法2020-02-02
我們?cè)陂_發(fā) Vue 項(xiàng)目的時(shí)候會(huì)使用一些前端組件庫(kù),例如 Element、Ant Design 等,這些組件庫(kù)雖然方便,但是也有一些缺點(diǎn),比如內(nèi)置的圖標(biāo)太少,例如我們開發(fā)醫(yī)療、財(cái)務(wù)、工程等一些前端項(xiàng)目,內(nèi)置的圖標(biāo)不能滿足我們的需求,所以我們常常在Vue項(xiàng)目中引入SVG圖標(biāo)2024-09-09
徹底搞懂并解決vue-cli4中圖片顯示的問題實(shí)現(xiàn)
這篇文章主要介紹了徹底搞懂并解決vue-cli4中圖片顯示的問題，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-08-08
uniapp使用v-loading并且不引入element-ui的操作方法
這篇文章主要介紹了uniapp使用v-loading并且不引入element-ui,首先創(chuàng)建loading.js，創(chuàng)建lloading.scss，本文結(jié)合示例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2022-10-10
vscode中開發(fā)運(yùn)行uniapp項(xiàng)目詳細(xì)步驟
VSCode作為一個(gè)非常強(qiáng)大的代碼編輯器,可以集成眾多的插件和工具來(lái)優(yōu)化開發(fā)效率,這篇文章主要給大家介紹了關(guān)于vscode中開發(fā)運(yùn)行uniapp項(xiàng)目的詳細(xì)步驟,需要的朋友可以參考下2023-07-07