Vue3實現(xiàn)優(yōu)雅加載圖片的動畫效果

更新時間：2023年10月08日 10:16:20 作者：萌萌噠草頭將軍

這篇文章主要為大家詳細介紹了Vue3如何實現(xiàn)加載圖片時添加一些動畫效果,文中的示例代碼講解詳細,具有一定的借鑒價值,有需要的小伙伴可以參考下

高斯模糊效果

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);
  });
}

對應的樣式

@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");
};

對應的樣式

@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;
}

效果如下

到此這篇關于Vue3實現(xiàn)優(yōu)雅加載圖片的動畫效果的文章就介紹到這了,更多相關Vue3加載圖片內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

Vue首頁加載白屏原因以及10種解決方法匯總
這篇文章主要介紹了Vue首頁加載白屏原因以及10種解決方法匯總，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2023-03-03
詳解mpvue scroll-view自動回彈bug解決方案
設置了scroll-top的scroll-view組件，在組件所在vue實例data發(fā)生改變時會自動回彈到最上方，非常具有實用價值，需要的朋友可以參考下
2018-10-10
Vue3中事件總線mitt的使用方式
mitt又稱事務總線,是第三方插件,這篇文章主要為大家詳細介紹了Vue3中事件總線mitt的使用方式,感興趣的小伙伴可以跟隨小編一起學習一下
2025-03-03
Vue?(Vuex)中?store?基本用法
Vuex?是一個專為?Vue.js?應用程序開發(fā)的狀態(tài)管理模式。它采用集中式存儲管理應用的所有組件的狀態(tài)，并以相應的規(guī)則保證狀態(tài)以一種可預測的方式發(fā)生變化，這篇文章主要介紹了Vue?中?store?基本用法,需要的朋友可以參考下
2023-01-01
el-table表格動態(tài)合并行及合并行列實例詳解
在使用el-table的時候經常會涉及到表格的列合并，包括表格操作列的合并,下面這篇文章主要給大家介紹了關于el-table表格動態(tài)合并行及合并行列的相關資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下
2022-10-10
vue實現(xiàn)el-select默認選擇第一個或者第二個
這篇文章主要介紹了vue實現(xiàn)el-select默認選擇第一個或者第二個，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2022-09-09
超詳細動手搭建一個VuePress 站點及開啟PWA與自動部署的方法
這篇文章主要介紹了超詳細動手搭建一個VuePress 站點及開啟PWA與自動部署的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2019-01-01
詳解Vue 中 extend 、component 、mixins 、extends 的區(qū)別
這篇文章主要介紹了Vue 中 extend 、component 、mixins 、extends 的區(qū)別,非常不錯，具有參考借鑒價值，需要的朋友可以參考下
2017-12-12
Django+Vue實現(xiàn)WebSocket連接的示例代碼
這篇文章主要介紹了Django+Vue實現(xiàn)WebSocket連接的示例代碼,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
2019-05-05
vue2中provide/inject的使用與響應式傳值詳解
Vue中 Provide/Inject實現(xiàn)了跨組件的通信,下面這篇文章主要給大家介紹了關于vue2中provide/inject的使用與響應式傳值的相關資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下
2022-09-09