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

news2025/6/24 1:28:09

从底部弹出来,有过渡动画效果
在这里插入图片描述
用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.coloradmin.cn/o/1293278.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

55.MQ高级特性

目录 一、RabbitMQ部署指南。 1&#xff09;单机部署。 1.1.下载镜像 1.2.安装MQ 2&#xff09;安装DelayExchange插件。 2.1.下载插件 2.2.上传插件 2.3.安装插件 2.4.使用插件。 3&#xff09;集群部署。 3.1.集群分类 3.2.获取cookie 3.3.准备集群配置 3.4.启…

【开源】基于JAVA语言的农家乐订餐系统

项目编号&#xff1a; S 043 &#xff0c;文末获取源码。 \color{red}{项目编号&#xff1a;S043&#xff0c;文末获取源码。} 项目编号&#xff1a;S043&#xff0c;文末获取源码。 目录 一、摘要1.1 项目介绍1.2 项目录屏 二、功能模块2.1 用户2.2 管理员 三、系统展示四、核…

Day15——File类与IO流

1.java.io.File类的使用 1.1 File类的理解 File 类及本章下的各种流&#xff0c;都定义在 java.io 包下。一个 File 对象代表硬盘或网络中可能存在的一个文件或者文件目录&#xff08;俗称文件夹&#xff09;&#xff0c;与平台无关。&#xff08;体会万事万物皆对象&#xf…

Qt 输入一组数,排序后用柱状图显示

Qt柱状图&#xff0c;需要使用到QChart模块&#xff0c;因此需要在安装Qt时勾选上QChart模块。然后在工程.pro文件中加上 QT charts 参考代码&#xff1a; //MainWindow.h #ifndef MAINWINDOW_H #define MAINWINDOW_H#include <QMainWindow> #include <QPushButton…

Global IIIumination(GI)全局光照原理(一)3D空间全局光照

文章目录 一、Global IIIumination&#xff08;GI&#xff09;全局光照基本概念二、主流的全局光照方法&#xff1a;三、Reflective shadow maps&#xff08;RSM&#xff09;反射阴影贴图 全局光照四、Light Propagation Volumes (LPV)光线传播体积 全局光照1.第一步&#xff0…

Apache Flink(四):Flink 其他实时计算框架对比

🏡 个人主页:IT贫道_大数据OLAP体系技术栈,Apache Doris,Clickhouse 技术-CSDN博客 🚩 私聊博主:加入大数据技术讨论群聊,获取更多大数据资料。 🔔 博主个人B栈地址:豹哥教你大数据的个人空间-豹哥教你大数据个人主页-哔哩哔哩视频 根据前文描述我们知道Flink主要处…

Qt::UniqueConnection和lambda一块用无效

如果槽函数是lambda。 那么用了Qt::UniqueConnection也会出现槽函数被多次调用的问题。 原因&#xff1a; 参考官方文档&#xff1a; QObject Class | Qt Core 5.15.16https://doc.qt.io/qt-5/qobject.html#connect

UE Websocket笔记

参考链接 [UE4 C入门到进阶]12.Websocket网络通信 - 哔哩哔哩 包含怎么用Nodejs 写测试服务器 UE4_使用WebSocket和Json&#xff08;上&#xff09; - 知乎 包含Python写测试服务器 UE4_使用WebSocket和Json&#xff08;下&#xff09; - 知乎 示例代码 xxx.Build.cs"W…

万界星空科技MES---制造企业的加工生产模式

在现代制造业中&#xff0c;加工生产模式是制造企业组织和管理生产过程的重要方面。不同的加工模式适用于不同的生产需求和产品类型。其中流水型、离散型和混合型是三种常见的加工生产模式。1. 流水型加工模式 流水型加工模式是一种高度自动化的生产方式&#xff0c;适用于…

Django-Redis

NoSQL&#xff1a;(不支持sql语句) Redis MongoDB Hbase hadoop Cassandra hadoop key-value数据库&#xff08;非关系性数据库&#xff09; redis优势 性能高&#xff0c;读取速度快&#xff0c;存在内存中 Redis应用场景 用来做缓存 在某些特定场景下替代传统数据库---社交…

WEB组态编辑器(BY组态)介绍

BY组态是一款非常优秀的纯前端的【web组态插件工具】&#xff0c;可无缝嵌入到vue项目&#xff0c;react项目等&#xff0c;由于是原生js开发&#xff0c;对于前端的集成没有框架的限制。同时由于BY组态只是一个插件&#xff0c;不能独立运行&#xff0c;必须嵌入到你方软件平台…

每日一题:LeetCode-11.盛水最多的容器

每日一题系列&#xff08;day 13&#xff09; 前言&#xff1a; &#x1f308; &#x1f308; &#x1f308; &#x1f308; &#x1f308; &#x1f308; &#x1f308; &#x1f308; &#x1f308; &#x1f308; &#x1f308; &#x1f308; &#x1f308; &#x1f50e…

JAVA导出PDF(一)

思路一&#xff1a;直接导出pdf 使用freemarker和itext把html转pdf&#xff0c;存在中文乱码&#xff0c;宋体不识别&#xff0c;需下载simsun.ttc字体&#xff0c;空白占位符不识别等等问题&#xff0c;对前端依赖性较大&#xff0c;不推荐&#xff1b; 适用范围&#xff1a;…

【目标检测从零开始】torch搭建yolov3模型

用torch从0简单实现一个的yolov3模型&#xff0c;主要分为Backbone、Neck、Head三部分 目录 Backbone&#xff1a;DarkNet53结构简介代码实现Step1&#xff1a;导入相关库Step2&#xff1a;搭建基本的Conv-BN-LeakyReLUStep3&#xff1a;组成残差连接块Step4&#xff1a;搭建Da…

idea本地调试hadoop 遇到的几个问题

1.DEA对MapReduce的toString调用报错&#xff1a;Method threw ‘java.lang.IllegalStateException‘ exception. Cannot evaluate org.apache.hadoop.mapreduc 解决方法&#xff1a;关闭 IDEA 中的启用“ tostring() ”对象视图 2.代码和hdfs路径都对的情况下&#xff0c;程序…

如何使用ArcGIS Pro制作类似CAD的尺寸注记

经常使用CAD制图的朋友应该比较熟悉CAD内的尺寸标注&#xff0c;这样的标注看起来直观且简洁&#xff0c;那么在ArcGIS Pro内能不能制作这样尺寸注记呢&#xff0c;答案是肯定的&#xff0c;这里为大家介绍一下制作的方法&#xff0c;希望能对你有所帮助。 数据来源 本教程所…

(JAVA)OpenCV的安装与使用

本安装教程属于CLI安装&#xff0c;Windows用户可以使用Power Shell 官网教程点击查看 安装OpenCV # git克隆项目 git clone git://github.com/opencv/opencv.git cd opencv # 切换对应的版本分支 git checkout 4.x mkdir build && cd build # 生成Makefile cmake -D…

tomcat配置管理员And配置访问静态资源

配置管理员 打开 tomcat\conf\tomcat-users.xml <tomcat-users xmlns"http://tomcat.apache.org/xml"xmlns:xsi"http://www.w3.org/2001/XMLSchema-instance"xsi:schemaLocation"http://tomcat.apache.org/xml tomcat-users.xsd"version&qu…

UE Http笔记

c参考链接 UE4 开发如何使用 Http 请求_wx61ae2f5191643的技术博客_51CTO博客 虚幻引擎:UEC如何对JSON文件进行读写?-CSDN博客 UE4 HTTP使用 官方免费插件 VaRest 在代码插件创建的VaRest - 虚幻引擎商城 UE5在蓝图中使用Varest插件Get&#xff0c;Post两种常见请求方式…

No Chromedriver found that can automate Chrome ‘x.x.xxxx‘的解决办法

一、前置说明 在使用Appium对Android设备自动化测试时&#xff0c;切换WebView时抛出异常&#xff1a; selenium.common.exceptions.WebDriverException: Message: An unknown server-side error occurred while processing the command. Original error: No Chromedriver foun…