Vue3实现优雅加载图片的动画效果
更新时间：2023年10月08日 10:16:20 作者：萌萌哒草头将军
这篇文章主要为大家详细介绍了Vue3如何实现加载图片时添加一些动画效果,文中的示例代码讲解详细,具有一定的借鉴价值,有需要的小伙伴可以参考下
这篇文章是紧接上篇的内容，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;
}效果如下
到此这篇关于Vue3实现优雅加载图片的动画效果的文章就介绍到这了,更多相关Vue3加载图片内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
这篇文章主要介绍了vue 子组件watch监听不到prop的解决，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-08-08
这篇文章主要给大家介绍了关于vue.js整合vux中上拉加载下拉刷新的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧。2018-01-01
Vite使用unplugin-auto-import实现vue3中的自动导入
本文主要介绍了Vite使用unplugin-auto-import实现vue3中的自动导入,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧2024-06-06
这篇文章主要介绍了Vue3中多个弹窗同时出现的解决思路,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-02-02
在Vue应用中，我们通常需要实现分布式鉴权和认证，以确保用户的安全性和数据的保密性，本文将介绍在Vue中如何进行分布式鉴权与认证,需要的朋友可以参考下2023-06-06
组件(Component)是Vue.js最强大的功能之一。组件可以扩展HTML元素，封装可重用的代码，本文将详细介绍Vue组件基础用法2020-02-02
我们在开发 Vue 项目的时候会使用一些前端组件库,例如 Element、Ant Design 等,这些组件库虽然方便,但是也有一些缺点,比如内置的图标太少,例如我们开发医疗、财务、工程等一些前端项目,内置的图标不能满足我们的需求,所以我们常常在Vue项目中引入SVG图标2024-09-09
这篇文章主要介绍了彻底搞懂并解决vue-cli4中图片显示的问题，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-08-08
uniapp使用v-loading并且不引入element-ui的操作方法
这篇文章主要介绍了uniapp使用v-loading并且不引入element-ui,首先创建loading.js，创建lloading.scss，本文结合示例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2022-10-10
VSCode作为一个非常强大的代码编辑器,可以集成众多的插件和工具来优化开发效率,这篇文章主要给大家介绍了关于vscode中开发运行uniapp项目的详细步骤,需要的朋友可以参考下2023-07-07
最新评论