vue图片由小放大
原生效果
<template>
<div>
<transition>
<img :src="data:imageUrl" class="image" />
</transition>
</div>
</template> <script>
import imageUrl from "../assets/backmr.png";
export default {
data() {
return {
imageUrl,
};
},
methods: {},
};
</script> <style>
.image {
width: 200px;
height: 200px;
animation: image-animation 3s forwards;
transform-origin: center;
} @keyframes image-animation {
0% {
transform: scale(0);
}
100% {
transform: scale(1);
}
}
</style>
优化效果
<template>
<div>
<button @click="showImage">显示图片</button>
<transition name="image-animation">
<div v-if="showImageFlag" class="image-container1">
<img class="image" :src="data:imageUrl" />
</div>
</transition>
</div>
</template> <script> export default {
data() {
return {
showImageFlag: false,
imageUrl:require("../assets/yes.png"),
};
},
methods: {
showImage() {
this.showImageFlag = true;
setTimeout(() => {
this.showImageFlag = false;
}, 4000); // 设置定时器,3秒后将 showImage 设置为 false
},
},
};
</script> <style>
.image-container1 {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0, 0, 0, 0.5);
display: flex;
align-items: center;
justify-content: center;
z-index: 9999;
} .image {
width: 200px;
height: 200px;
animation: image-animation 3s forwards;
transform-origin: center;
}
@keyframes image-animation {
0% {
transform: scale(0);
}
100% {
transform: scale(1);
}
}
</style>
vue图片由小放大的更多相关文章
- vue图片点击放大预览
第一种:viewerjs使用介绍(PC.移动端都兼容) 1.先安装依赖 npm install v-viewer --save 2.main.js内引用并注册调用 //main.js import V ...
- vue图片点击放大功能
因项目需求(ui框架element-ui),需要实现图片的点击放大,还要能旋转以及上下切换.当时第一反应,element-ui好像没有这样的组件,就想过自己写,但是那个旋转翻页上下切换感觉有点麻烦,不 ...
- js/vue图片压缩
js版 新建compressImage.js,内容如下: // 将base64转换为blob(有需要可加上,没需要可不加) function convertBase64UrlToBlob(urlDat ...
- css3 实现图片等比例放大与缩小
css3 实现图片等比例放大与缩小 在工作中,经常会碰到图片缩放的情况,比如服务器端返回的图片大小,可能大小不同,有的大,有的小,服务器端返回的图片大小我们不能控制的,但是在我们设计稿的时候,可能会规 ...
- Taro -- Swiper的图片由小变大3d轮播效果
Swiper的图片由小变大3d轮播效果 this.state = ({ nowIdx:, swiperH:'', imgList:[ {img:'../../assets/12.jpg'}, {img ...
- 微信企业号办公系统-图片预览放大功能-previewImage
在微信里看过文章的应该知道,文章里的图片点击后可以放大.分享和保存. 然而自己在微信里开发的网页,里面的图片点击后没办法实现这个效果,然后就去看了下微信JS文档,里面有个previewImage可以调 ...
- 制作一个顶部图片可以拉伸放大缩小效果的tableViewHeader
最近负责公司项目个人中心的项目模块研发,首页是一个头部图片可以拉伸放大缩小效果的tableViewHeader,今天这个demo和教程我增加了模糊效果和头像缩小效果.具体效果如图: 如果这个效果是想要 ...
- iOS开发-UITableView顶部图片下拉放大
关于顶部图片下拉放大,在用户展示的个人中心显示用户个人头像信息,设置UITableView的headerView实现,UITableView继承自UIScrollView,同样的设置UIScrollV ...
- ios开发图片点击放大
图片点击放大,再次点击返回原视图.完美封装,一个类一句代码即可调用.IOS完美实现 创建了一个专门用于放大图片的类,以下为.h文件 #import <Foundation/Foundation. ...
- vue项目向小程序迁移调研
概述 今天调研了一下vue项目怎么向小程序迁移,有些心得,记录下来,供以后开发时参考,相信对其他人也有用. 基本上vue项目向小程序迁移不外乎2种方法,一种是用小程序的web-view组件,另一种是用 ...
随机推荐
- 【最佳实践】高可用mongodb集群(1分片+3副本):规划及部署
结合我们的生产需求,本次详细整理了最新版本 MonogoDB 7.0 集群的规划及部署过程,具有较大的参考价值,基本可照搬使用. 适应数据规模为T级的场景,由于设计了分片支撑,后续如有大数据量需求,可 ...
- NPOI在EXCEL中插入图片和超链接
using System; using System.Collections.Generic; using System.ComponentModel; using System.Data; usin ...
- 小景的工具使用--Java诊断工具Arthas的使用说明
小景最近在做程序和数据库的压测工作,期间监控压测数据,分析程序原因变成了一个待解决的问题,根据公司小伙伴的建议,接触了阿尔萨斯这个诊断工具,下面小景分别基于Linux操作系统和Windows操作系统, ...
- Leetcode.456单调栈
给你一个整数数组 nums ,数组中共有 n 个整数.132 模式的子序列 由三个整数 nums[i].nums[j] 和 nums[k] 组成,并同时满足:i < j < k 和 num ...
- CF85B [Embassy Queue]
Problem 题目简述 有 \(n\) 个人分别在 \(c_i\) 的时刻来,他们都要在 \(k_1\),\(k_2\) 和 \(k_3\) 窗口干不同的事,当有后面一人也排在在同一窗口时,必须等待 ...
- App支付报错"商家订单参数异常,请重新发起付款"排查流程
今天在对接支付宝 APP 支付的时候遇到了一个报错,记录下问题的排查过程~ 报错过程 APP 中弹窗提示的报错"商家订单参数异常,请重新发起付款",检查了下参数感觉没啥问题,不知道 ...
- java代审之XXE
一.什么是XXE漏洞 xxe攻击也叫xml外部实体注入攻击,是一种常见的Web应用安全漏洞,通过漏洞可导致任意文件读取.目录遍历.探测内网端口.攻击内网网站.发起DoS拒绝服务攻击.执行系统命令等安全 ...
- PostgreSQL 序列(Sequence)
基本操作 --新增序列 CREATE SEQUENCE xxx_id_seq INCREMENT 1 -- 一次加多少 MINVALUE 1 -- 最小值 START 1 --从多少开始 CACHE ...
- 文心一言 VS 讯飞星火 VS chatgpt (133)-- 算法导论11.2 5题
五.用go语言,假设将一个具有n个关键字的集合存储到一个大小为 m 的散列表中.试说明如果这些关键字均源于全域U,且|U|>nm,则U 中还有一个大小为n 的子集,其由散列到同一槽位中的所有关键 ...
- 使用js写一个音乐音谱图
我们经常看到在听乐音的时候,会有音谱图随着音乐的节奏不断变化给人视觉上的享受,那么我们通过js来实现以下这个效果,下面是简单的效果图 首先我们需要有一个绘制音频的函数 function draw() ...