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