【vue】图片加载动画效果

加载后，一种是图片由浅到深。一种是闪光加载效果消失。

<template><imgcrossorigin="anonymous":src="imgSrc":class="[loading?'loading':'','kl-image-load']"@error="imgError"@load="imgLoad":alt="imgAlt"/>
</template>
<script>
import {ref, watch} from "vue";export default {name: "ImageLoad",props: {imgSrc: {default: "https://img1.baidu.com/it/u=2863108920,4275403644&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=281"},imgAlt: {default: "图片加载失败"},width:{default:'auto'},height:{default:'auto'}},setup(props, ctx) {const loading = ref(true)watch(props.imgSrc, (c, v) => {loading.value = true;})const imgError = () => {// loading.value=false;}const imgLoad = () => {loading.value = false;}return {imgLoad,imgError,loading}}}
</script><style scoped>
.kl-image-load {max-width: 100%;height: auto;position: relative;overflow: hidden;
}
.kl-image-load {opacity: 1;transition: opacity 1s ease-in;
}
.kl-image-load.loading{opacity: 0;transition: opacity 1s ease-in;
}
.kl-image-load.loading{height: 100px;width: 100%;
}</style>

<template>
<div class="kl-image-load-light-box"><imgcrossorigin="anonymous":src="imgSrc":class="[loading?'loading':'','kl-image-load-light']"@error="imgError"@load="imgLoad":alt="imgAlt"/><div:class="[loading?'show':'','kl-image-load-light-mask']"></div>
</div>
</template>
<script>
import {ref, watch} from "vue";export default {name: "ImageLoadLight",props: {imgSrc: {default: "https://img1.baidu.com/it/u=2863108920,4275403644&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=281"},imgAlt: {default: "图片加载失败"},width:{default:'100%'},height:{default:'auto'}},setup(props, ctx) {const loading = ref(true)watch(props.imgSrc, (c, v) => {loading.value = true;})const imgError = () => {// loading.value=false;}const imgLoad = () => {loading.value = false;}return {imgLoad,imgError,loading}}}
</script><style scoped>
.kl-image-load-light-box{position: relative;display: inline-table;height: auto;width: auto;
}
.kl-image-load-light {max-width: 100%;height: auto;position: relative;overflow: hidden;
}
.kl-image-load-light-mask{position: absolute;left: 0;right: 0;top: 0;bottom: 0;background-color: black;opacity: 0;transition: opacity 1s ease-in;
}
.kl-image-load-light-mask.show{opacity: 1;transition: opacity 1s ease-in;
}
.kl-image-load-light-mask::after {content: '';user-select: none;pointer-events: none;position: absolute;left: 0;top: 0;width: 100%;height: 100%;background-image: linear-gradient(135deg, transparent 40%, #FFFFFF 50%, transparent 60%);background-size: 100% 100%;background-repeat: no-repeat;animation: au 1s linear infinite;
}
@keyframes au {0% {left: -100%;}100% {left: 200%;}
}</style>

【vue】图片加载动画效果相关推荐

html实现图片加载动画效果,HTML5+javascript实现图片加载进度动画效果
在网上找资料的时候,看到网上有图片加载进度的效果,手痒就自己也写了一个. 图片加载完后,隐藏loading效果. 想看加载效果,请ctrel+F5强制刷新或者清理缓存. 效果预览: 0% 代码如下: ...
android 自定义图片加载动画效果,Android自定义加载动画-感染体
Android自定义动画系列七,今天来分享第七个自定义Loading动画(InfectionBallBuilder),看上去感觉有种病毒源被感染的感觉,所以名字就叫感染体,这个动画做出来的效果,我不怎 ...
7 种最棒的 Vue Loading 加载动画组件测评与推荐 - 穷尽市面上所有加载动画效果（Vue loader）类型
本文完整版:<7 种最棒的 Vue Loading 加载动画组件测评与推荐> 目录 7 种不同类型的 Vue Loading 加载动画组件 1. Vue Simple Spinner - ...
vue图片加载完成前增加loading效果
这次给大家带来vue图片加载完成前增加loading效果,vue图片加载完成前增加loading效果的注意事项有哪些,下面就是实战案例,一起来看一下. 如下所示: 1 2 3 4 5 6 7 8 9 ...
SAP UI的加载动画效果和幽灵设计(Ghost Design)
这是Jerry 2021年的第 14 篇文章,也是汪子熙公众号总共第 285 篇原创文章. 在本篇文章之前,Jerry 印象最深的幽灵,应该要算<星际争霸I>里人族能够隐形的空中单位 Wr ...
模仿滴滴单车解锁的时候，从0%到90%的欺骗加载动画效果
/**欺骗加载动画效果-*/var text = '已解锁{value}%';var interval;var __fakeLoading = function (callback, time, pe ...
真是好东西！一组动感的页面加载动画效果
如果您曾经访问过 Nicolas Zezuka 和 Active Theory 的出色的设计网站,你可能已经注意到在显示新内容之前动感的页面加载动画了.这种风格的动画效果最近非常流行,因此这篇文章想给 ...
HTML5+CSS3小实例：简单又好看的加载动画效果
HTML5+CSS3做一个简单又好看的加载动画效果,一个三色圆环转动,再加圆环内部文字转动,效果虽然简单,但第一次看到还是很惊艳的,最主要一点,代码真的超简单的. 效果: 源码: <!DOCTY ...
【web前端特效源码】使用HTML5+CSS3制作一个会动的音频loading加载动画效果~~适合初学者~超简单~ |前端开发|IT编程
b站视频演示效果: [web前端特效源码]使用HTML5+CSS3制作一个会动的音频loading加载动画效果~~适合初学者~超简单~ |前端开发|IT软件效果图: 完整代码: <!DOCTY ...

【vue】图片加载动画效果

【vue】图片加载动画效果相关推荐

最新文章

热门文章