这篇文章是紧接上篇的内容，Vue3如何优雅的加载大量图片🚀🚀🚀
上篇文章，我们只是简单增加了一个渐变的效果。
这篇文章，我分享两个新的动画：
🚀 高斯模糊效果
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; }
效果如下
希望这两个新的动画对你有帮助。
