css弹窗动画效果,示例弹窗从底部弹出

news/2024/7/10 2:35:12 标签: css, 前端, uni-app, vue, html

从底部弹出来,有过渡动画效果
在这里插入图片描述
用max-height可以自适应内容的高度,当内容会超过最大高度时可以在弹窗里加个scroll-view
弹窗不能用v-if来隐藏,不然transition没效果,transition只能对已有dom元素起效果,所以用透明和visibility来隐藏

<view @tap="showpop">弹出来</view>

<view class="popWai" :class="isshowpop?'popWaiAc':''" @tap="closepop">
	<view class="popNei" :style="isshowpop?'bottom:0':'bottom:-680rpx'">
		<div>发顺丰萨芬撒</div>
	</view>
</view>
data(){
	return{
		isshowpop:false,
	}
},
methods:{
	showpop(){
		this.isshowpop = true;
	},
	closepop(){
		this.isshowpop = false;
	},
}
.popWai{
	position: fixed;
	top: 0;
	left: 0;
	background-color: rgba(0, 0, 0, 0.5);
	width: 100%;
	height: 100%;
	z-index: 99;
	opacity: 0;
	visibility: hidden;
	overflow: hidden;
}
.popNei{
	position: absolute;
	left: 0;
	width: 100%;
	max-height: 680rpx;
	background-color: #fff;
	transition: all 0.5s ease-out;
}
.popWaiAc {
	opacity: 1;
	visibility: visible;
}

http://www.niftyadmin.cn/n/5245551.html

相关文章

js/jQuery常见操作 之 jQuery操作复选框的常见问题

js/jQuery常见操作 之 jQuery操作复选框的常见问题 1. js/jQuery的其他一些常见基础操作2. 全选/全不选问题2.1 效果2.2 实现代码2.2.1 简单js实现2.2.2 jQuery实现2.2.2.1 注意语法&#xff08;区别jQuery版本&#xff09;2.2.2.2 完整代码实现 3. jQuery实现点击 行tr 实现ch…

说说React jsx转换成真实DOM的过程?

在React中&#xff0c;JSX&#xff08;JavaScript XML&#xff09;是一种语法糖&#xff0c;用于描述用户界面的结构和组件关系。当你编写React组件并包含JS JSX解析&#xff1a;React中的JSX代码首先会被解析成JavaScript对象。这个过程通常是通过Babel等工具进行的&#xff0…

畅游分布式劳动力世界...

不断变化的软件开发环境继续为开发人员和雇用开发人员的企业带来新的机遇和挑战。无论是量子计算方面的突破、推动游戏行业增长的扩展现实开发&#xff0c;还是监管环境日益复杂的情况&#xff0c;DevOps 社区在来年都有很多事情要做。对于旨在确保未来盈利的企业来说&#xff…

webGL开发虚拟实验室技术方案

开发虚拟实验室涉及到模拟实际实验环境和过程&#xff0c;同时提供用户互动性和学习体验。以下是一个可能的技术方案&#xff0c;用于实现这样的虚拟实验室&#xff0c;希望对大家有所帮助。北京木奇移动技术有限公司&#xff0c;专业的软件外包开发公司&#xff0c;欢迎交流合…

【爬取音乐,并将音乐信息储存到数据库中】

爬取音乐,并将音乐信息储存到数据库中 确定音乐网站的url并分析网站分析二级页面创建数据库使用Xpath解析&#xff0c;进行多层爬取保存信息完整代码结果 确定音乐网站的url并分析网站 分析二级页面 创建数据库 # 创建一个链接对象 conn pymysql.connect(hostmaster, userroo…

第二十一章

网络通信这一章 基本分为三个部分 网络基础概念和TCP,UDP这三个部分主要如下&#xff1a; 计算机网络实现了堕胎计算机间的互联&#xff0c;使得它们彼此之间能够进行数据交流。网络应用程序就是再已连接的不同计算机上运行的程序&#xff0c;这些程序借助于网络协议&#xf…

【分布式微服务专题】从单体到分布式(二、SpringCloud整合Nacos)

目录 前言阅读对象阅读导航前置知识笔记正文一、下载安装二、项目整合2.1 服务注册与发现2.2 动态配置管理 三、其他实验四、服务之间的调用 学习总结感谢 前言 本篇笔记主要是记录我整合Nacos项目进来的过程。以实现服务注册发现&#xff0c;以及分布式配置管理。关于Nacos&a…

Nginx反向代理导致请求头丢失

nginx默认request的header的那么中包含’_’时&#xff0c;会自动忽略掉。 解决方法是&#xff1a;在nginx里的nginx.conf配置文件中的http部分中添加如下配置&#xff1a; underscores_in_headers on; &#xff08;默认 underscores_in_headers 为off&#xff09;参考博文&am…