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

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

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

相关文章

软件测试入门:静态测试

什么是静态测试 顾名思义&#xff0c;这里的静态是指程序的状态&#xff0c;即在不执行代码的情况下检查软件应用程序中的缺陷。进行静态测试是为了仅早在开发的早期阶段发现程序缺陷&#xff0c;因为这样可以更快速地识别缺陷并低成本解决缺陷&#xff0c;它还有助于查找动态测…

Elasticsearch从入门到精通

Elasticsearch简介 应用开发中一个比较常见的功能是搜索&#xff0c;传统应用的解决方案&#xff1a;数据库的模糊查询。 模糊查询存在的问题&#xff1a; 海量数据下效率低下功能不够丰富&#xff1a;不够智能、不能高亮 Elasticsearch 是一个分布式、RESTful 风格的搜索和数据…

鸿蒙原生应用/元服务开发-Stage模型能力接口(一)

ohos.app.ability.Ability (Ability基类)一、说明 UIAbility和ExtensionAbility的基类&#xff0c;提供系统配置更新回调和系统内存调整回调。本模块首批接口从API version 9 开始支持。后续版本的新增接口&#xff0c;采用上角标单独标记接口的起始版本。本模块接口仅可在Stag…

flex布局的flex为1到底是什么

参考博客&#xff1a;flex:1什么意思_公孙元二的博客-CSDN博客 flex&#xff1a;1即为flex-grow&#xff1a;1&#xff0c;经常用作自适应布局&#xff0c;将父容器的display&#xff1a;flex&#xff0c;侧边栏大小固定后&#xff0c;将内容区flex&#xff1a;1&#xff0c;内…

华为数通---配置Smart Link负载分担案例

定义 Smart Link&#xff0c;又叫做备份链路。一个Smart Link由两个接口组成&#xff0c;其中一个接口作为另一个的备份。Smart Link常用于双上行组网&#xff0c;提供可靠高效的备份和快速的切换机制。 目的 下游设备连接到上游设备&#xff0c;当使用单上行方式时&#x…

KUKA机器人如何自定义数值型变量?

KUKA机器人如何自定义数值型变量? 在KUKA机器人系统中如何自定义数值型变量来实现工件计数、计时等功能? 具体方法可参考以下内容: 如下图所示,找到SYSTEM—CONFIG.DAT文件,进入(需要管理员权限), 如下图所示,在第10行自定义一个int型的变量a, 如下图所示,自定义完成…

Ribbon组件的负载均衡原理

原因背景 spring cloud的底层负载均衡是采用Ribbon组件&#xff0c;我们将user-service服务注册到eureka-server中&#xff0c;那么当我们在另一个服务的代码层面请求远程调用API接口http://user-service/users/5时&#xff0c;程序代码如何解析远程调用的user-service服务名转…

Dockerfile介绍

1. DockerFile介绍 dockerfile是用来构建docker镜像的文件&#xff01;命令参数脚本&#xff01; 构建步骤&#xff1a; 1、编写一个dockerfile文件 2、docker build 构建成为一个镜像 3、docker run运行镜像 4、docker push发布镜像&#xff08;DockerHub、阿里云镜像仓库…

Django模板,Django中间件,ORM操作(pymysql + SQL语句),连接池,session和cookie, 缓存

day04 django进阶-知识点 今日概要&#xff1a; 模板中间件ORM操作&#xff08;pymysql SQL语句&#xff09;session和cookie缓存&#xff08;很多种方式&#xff09; 内容回顾 请求周期 路由系统 最基本路由关系动态路由&#xff08;含正则&#xff09;路由分发不同的app中…

《论文阅读》用于情绪回复生成的情绪正则化条件变分自动编码器 Affective Computing 2021

《论文阅读》用于情绪回复生成的情绪正则化条件变分自动编码器 前言简介模型结构实验结果总结前言 今天为大家带来的是《Emotion-Regularized Conditional Variational Autoencoder for Emotional Response Generation》 出版:IEEE Transactions on Affective Computing 时间…

ZKP Understanding Nova (2) Relaxed R1CS

Understanding Nova Kothapalli, Abhiram, Srinath Setty, and Ioanna Tzialla. “Nova: Recursive zero-knowledge arguments from folding schemes.” Annual International Cryptology Conference. Cham: Springer Nature Switzerland, 2022. Nova: Paper Code 2. Unders…

openGauss学习笔记-147 openGauss 数据库运维-备份与恢复-逻辑备份与恢复之gs_dump

文章目录 openGauss学习笔记-147 openGauss 数据库运维-备份与恢复-逻辑备份与恢复之gs_dump147.1 背景信息147.2 注意事项147.3 语法147.4 参数说明147.4.1 通用参数&#xff1a;147.4.2 转储参数&#xff1a;147.4.3 连接参数&#xff1a; 147.5 说明147.6 示例 openGauss学习…

HTTP、HTTPS、SSL协议以及报文讲解

目录 HTTP/HTTPS介绍 HTTP/HTTPS基本信息 HTTP请求与应答报文 HTTP请求报文 HTTP响应报文 SSL协议 SSL单向认证 SSL双向认证 HTTP连接建立与传输步骤 HTTP访问全过程相关报文&#xff08;以访问www.download.cucdccom为例子&#xff09; DNS报文解析 TCP三次握手连…

【Flink系列六】Flink里面的状态一致性

状态一致性 有状态的流处理&#xff0c;内部每个算子任务都可以有自己的状态&#xff0c;对于流处理器内部来说&#xff0c;所谓的状态一致性&#xff0c;其实就是我们所说的计算结果要保证准确。一条数据不应该丢失&#xff0c;也不应该重复计算。再遇到有故障时可以恢复状态…

RabbitMQ 常见面试题

目录 1.前置知识1.1.什么是 MQ&#xff1f;它有什么作用&#xff1f;1.2.什么是消费者生产者模型&#xff1f;1.3.AMQP 是什么&#xff1f; 2.RabbitMQ 入门2.1.什么是 RabbitMQ&#xff1f;有什么特点&#xff1f;2.2.RabbitMQ 的核心概念有哪些&#xff1f;2.2.1.生产者 (Pro…

css 元素前后添加图标(::before 和 ::after 的妙用)

<template><div class"container"><div class"label">猜你喜欢</div></div> </template><style lang"scss" scoped> .label {display: flex;&::before,&::after {content: "";widt…

LLM之RAG实战(二):使用LlamaIndex + Metaphor实现知识工作自动化

最先进的大型语言模型&#xff08;LLM&#xff09;&#xff0c;如ChatGPT、GPT-4、Claude 2&#xff0c;具有令人难以置信的推理能力&#xff0c;可以解锁各种用例——从洞察力提取到问答&#xff0c;再到通用工作流自动化。然而&#xff0c;他们检索上下文相关信息的能力有限。…

[论文阅读]BEVFusion

BEVFusion BEVFusion: A Simple and Robust LiDAR-Camera Fusion Framework BEVFusion&#xff1a;简单而强大的激光雷达相机融合框架 论文网址&#xff1a;BEVFusion 论文代码&#xff1a;BEVFusion 简读论文 论文背景&#xff1a;激光雷达和摄像头是自动驾驶系统中常用的两…

UE Http笔记

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

webpack学习-3.管理输出

webpack学习-3.管理输出 1.简单练手2.设置 HtmlWebpackPlugin3.清理 /dist 文件夹4.manifest5.总结 1.简单练手 官网的第一个预先准备&#xff0c;是多入口的。 const path require(path);module.exports {entry: {index: ./src/index.js,print: ./src/print.js,},output: …