🚀🚀🚀Vue3优雅加载图片的一些动画Ⅱ

文章同步在公众号:萌萌哒草头将军,欢迎关注

这篇文章是紧接上篇的内容,Vue3如何优雅的加载大量图片🚀🚀🚀

上篇文章,我们只是简单增加了一个渐变的效果。

这篇文章,我分享两个新的动画:

🚀 高斯模糊效果

js 复制代码
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);
  });
}

对应的样式

css 复制代码
@keyframes fadeIn {
  from {
    filter: blur(10px);
  }
  to {
    filter: blur(0px);
  }
}

.fade-in {
  animation: fadeIn 0.3s ease-in;
}

效果如下:

🚀 缩放动画

js 复制代码
img.onload = () => {
  img.setAttribute("class", "transform-in");
};

对应的样式

css 复制代码
@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;
}

效果如下

希望这两个新的动画对你有帮助。

相关推荐
秋田君7 分钟前
Vue3+Node.js 实现大文件上传:断点续传、秒传、分片上传完整教程(含源码)
前端
爱隐身的官人7 分钟前
ctfshow - web - nodejs
前端·nodejs·ctf
zhong liu bin7 分钟前
Vue框架技术详解——项目驱动概念理解【前端】【Vue】
前端·javascript·vue.js·vscode·vue
W-GEO7 分钟前
前端安全攻防:XSS, CSRF 等常见威胁的防范与检测指南
前端·安全·xss
2301_8035545210 分钟前
实习项目包装--HTTP 协议和 Web API
前端·网络协议·http
lssjzmn11 分钟前
Spring Web 异步响应实战:从 CompletableFuture 到 ResponseBodyEmitter 的全链路优化
java·前端·后端·springboot·异步·接口优化
这里有鱼汤12 分钟前
上班族没时间炒股?不妨试试这个隔夜超短战法(附:Python量化源码)
前端
n123523519 分钟前
Chrome 插件开发入门指南:从基础到实践
前端·chrome
前端 贾公子25 分钟前
ElementUI 中 validateField 对部分表单字段数组进行校验时多次回调问题
前端·javascript·elementui
棒棒的唐26 分钟前
vue2 elementUI 登录页面实现回车提交登录的方法
前端·javascript·elementui