当前位置: 首页 > news >正文

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;
}

相关文章:

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

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

STM32CubeIDE(CUBE-MX hal库)----RTC时钟,时钟实时显示

系列文章目录 STM32CubeIDE(CUBE-MX hal库)----初尝点亮小灯 STM32CubeIDE(CUBE-MX hal库)----按键控制 STM32CubeIDE(CUBE-MX hal库)----串口通信 STM32CubeIDE(CUBE-MX hal库)----定时器 STM32CubeIDE(CUBE-MX hal库)----蓝牙模块HC-05&#xff08;详细配置&#xff09; 前言…...

ubuntu 安装Nvidia驱动

官网下载 sudo bash NVIDIA。。。。。跟着b站机器人工匠阿杰即可。...

『亚马逊云科技产品测评』活动征文|基于亚马逊云EC2搭建PG开源数据库

授权声明&#xff1a;本篇文章授权活动官方亚马逊云科技文章转发、改写权&#xff0c;包括不限于在 Developer Centre, 知乎&#xff0c;自媒体平台&#xff0c;第三方开发者媒体等亚马逊云科技官方渠道 亚马逊EC2云服务器&#xff08;Elastic Compute Cloud&#xff09;是亚马…...

【开题报告】基于J2EE的高校水电费管理系统的设计与实现

1.选题背景 随着高校规模的扩大和信息化建设的深入&#xff0c;学生宿舍的水电费管理成为一项复杂而重要的任务。传统的水电费管理方式通常依赖于人工操作&#xff0c;存在着管理效率低下、数据处理繁琐、费用统计不准确等问题。因此&#xff0c;设计和实现一款基于J2EE的高校…...

Revisiting Proposal-based Object Detection阅读笔记

Revisiting Proposal-based Object Detection阅读笔记 论文地址&#xff1a;link Abstract For any object detector, the obtained box proposals or queries need to be classified and regressed towards ground truth boxes. 对于任何物体检测器来说&#xff0c;获得的…...

Docker部署NFS服务

创建基础镜像 mkdir /data/nfs -p chmod 755 /data/nfs# NFS默认端口: 111、2049、20048 docker run -d \ --privileged \ --name nfs_server \ -p 111:111/tcp \ -p 111:111/udp \ -p 2049:2049/tcp \ -p 2049:2049/udp \ -p 30001-30005:30001-30005/tcp \ -p 30001-30005:3…...

深度学习TensorFlow2基础知识学习后半部分

介绍几个重要操作&#xff1a; 1.范数 a tf.fill([1,2], value2.) b tf.norm(a)# 二范数#第二种计算方法 # 计算验证 a tf.square(a) log("a的平方:", a) a tf.reduce_sum(a) log("a平方后的和:", a) b tf.sqrt(a) log("a平方和后开根号:"…...

电脑系统重装Win10专业版操作教程

用户想给自己的电脑重新安装上Win10专业版系统&#xff0c;但不知道具体的重装步骤。接下来小编将详细介绍Win10系统重新安装的步骤方法&#xff0c;帮助更多的用户完成Win10专业版的重装&#xff0c;重装后用户即可体验到Win10专业版系统带来的丰富功能。 准备工作 1. 一台正常…...

打包Python项目

打包Python项目 本教程将指导您如何打包一个简单的Python项目。它将 向您展示如何添加必要的文件和结构来创建包&#xff0c;如何 构建包&#xff0c;以及如何将其上传到Python包索引&#xff08;PyPI&#xff09;。 尖端 如果您在运行本教程中的命令时遇到问题&#xff0c;请…...

使用Python实现爬虫IP负载均衡和高可用集群

做大型爬虫项目经常遇到请求频率过高的问题&#xff0c;这里需要说的是使用爬虫IP可以提高抓取效率&#xff0c;那么我们通过什么方法才能实现爬虫IP负载均衡和高可用集群&#xff0c;并且能快速的部署并且完成爬虫项目。 通常在Python中实现爬虫ip负载均衡和高可用集群需要一…...

Jenkins+Maven+Gitlab+Tomcat 自动化构建打包,部署

环境准备 1、安装服务 Jenkins工具、环境、插件配置 全局变量配置 Manage Jenkins>tools>JDK 安装 安装插件 Deploy to container 安装此插件&#xff0c;才能将打好的包部署到tomcat上 配置国内mvn源 创建maven项目 1 2 3 4 5 6 7 8 9 10...

泰凌微(Telink)8258配置串口收发自定义数据

在官网下载SDK后&#xff08;以Mesh SDK为例&#xff09;使用Eclipse打开&#xff0c;对应MCU的配置文件在app_config_8258.h&#xff0c;默认的HCI接口是HCI_USE_NONE&#xff0c;如果改成HCI_USE_UART后可以通过串口收发数据&#xff0c;此时默认接收函数处理的是以Telink的协…...

入门低代码开发:快速构建应用程序的方法

一、什么是低代码 低代码开发是一种通过可视化建模和拖拽式设计工具来快速构建应用程序的方法。传统软件开发通常需要编写大量的代码&#xff0c;而低代码开发则提供了更高层次的抽象&#xff0c;使开发过程更加简单和高效。通过可视化界面&#xff0c;用户可以通过拖拽组件、配…...

常见客户端消息推送服务【Java后端】

客户端消息推送 1、推送服务 苹果 APNs&#xff08;Apple Push Notification service&#xff09; 谷歌 FCM&#xff08;Firebase Cloud Messaging&#xff09;GCM&#xff08;Google Cloud Messaging&#xff09; 第三方 个推&#xff08;Getui&#xff09;UniApp&#xff…...

C++11(下)

可变参数模板 C11的新特性可变参数模板能够创建可以接受可变参数的函数模板和类模板. 相比C98/03, 类模版和函数模版中只能含固定数量的模版参数, 可变模版参数无疑是一个巨大的改进, 然而由于可变模版参数比较抽象, 使用起来需要一定的技巧, 所以这块还是比较晦涩的.掌握一些基…...

深度学习与逻辑回归模型的融合--TensorFlow多元分类的高级应用

手写数字识别 文章目录 手写数字识别1、线性回归VS逻辑回归Sigmoid函数 2、逻辑回归的基本模型-神经网络模型3、多元分类基本模型4、TensorFlow实战解决手写数字识别问题准备数据集数据集划分 特征数据归一化归一化方法归一化场景 标签数据独热编码One-Hot编码构建模型损失函数…...

水库大坝安全监测参数与设备

智慧水利中&#xff0c;水库大坝的安全监测必不可少。做好水库大坝的安全监测&#xff0c;是确保水库大坝结构安全和预防灾害的重要手段。对于预防灾害、保护人民生命财产安全、优化工程管理、改进工程设计、保护环境资源和提高公众信任等方面有着重要的意义。 水利水库大坝安全…...

要求CHATGPT高质量回答的艺术:提示工程技术的完整指南—第 22 章:情感分析提示

要求CHATGPT高质量回答的艺术&#xff1a;提示工程技术的完整指南—第 22 章&#xff1a;情感分析提示 情感分析是一种可以让模型确定一段文字的情感基调或态度的技术&#xff0c;比如它是正面的、负面的还是中性的。 要在 ChatGPT 中使用情感分析提示&#xff0c;应向模型提…...

数据清洗、特征工程和数据可视化、数据挖掘与建模的主要内容

1.4 数据清洗、特征工程和数据可视化、数据挖掘与建模的内容 视频为《Python数据科学应用从入门到精通》张甜 杨维忠 清华大学出版社一书的随书赠送视频讲解1.4节内容。本书已正式出版上市&#xff0c;当当、京东、淘宝等平台热销中&#xff0c;搜索书名即可。内容涵盖数据科学…...

【Python】 -- 趣味代码 - 小恐龙游戏

文章目录 文章目录 00 小恐龙游戏程序设计框架代码结构和功能游戏流程总结01 小恐龙游戏程序设计02 百度网盘地址00 小恐龙游戏程序设计框架 这段代码是一个基于 Pygame 的简易跑酷游戏的完整实现,玩家控制一个角色(龙)躲避障碍物(仙人掌和乌鸦)。以下是代码的详细介绍:…...

Vue3 + Element Plus + TypeScript中el-transfer穿梭框组件使用详解及示例

使用详解 Element Plus 的 el-transfer 组件是一个强大的穿梭框组件&#xff0c;常用于在两个集合之间进行数据转移&#xff0c;如权限分配、数据选择等场景。下面我将详细介绍其用法并提供一个完整示例。 核心特性与用法 基本属性 v-model&#xff1a;绑定右侧列表的值&…...

从零实现STL哈希容器:unordered_map/unordered_set封装详解

本篇文章是对C学习的STL哈希容器自主实现部分的学习分享 希望也能为你带来些帮助~ 那咱们废话不多说&#xff0c;直接开始吧&#xff01; 一、源码结构分析 1. SGISTL30实现剖析 // hash_set核心结构 template <class Value, class HashFcn, ...> class hash_set {ty…...

大语言模型(LLM)中的KV缓存压缩与动态稀疏注意力机制设计

随着大语言模型&#xff08;LLM&#xff09;参数规模的增长&#xff0c;推理阶段的内存占用和计算复杂度成为核心挑战。传统注意力机制的计算复杂度随序列长度呈二次方增长&#xff0c;而KV缓存的内存消耗可能高达数十GB&#xff08;例如Llama2-7B处理100K token时需50GB内存&a…...

力扣热题100 k个一组反转链表题解

题目: 代码: func reverseKGroup(head *ListNode, k int) *ListNode {cur : headfor i : 0; i < k; i {if cur nil {return head}cur cur.Next}newHead : reverse(head, cur)head.Next reverseKGroup(cur, k)return newHead }func reverse(start, end *ListNode) *ListN…...

数据结构第5章:树和二叉树完全指南(自整理详细图文笔记)

名人说&#xff1a;莫道桑榆晚&#xff0c;为霞尚满天。——刘禹锡&#xff08;刘梦得&#xff0c;诗豪&#xff09; 原创笔记&#xff1a;Code_流苏(CSDN)&#xff08;一个喜欢古诗词和编程的Coder&#x1f60a;&#xff09; 上一篇&#xff1a;《数据结构第4章 数组和广义表》…...

车载诊断架构 --- ZEVonUDS(J1979-3)简介第一篇

我是穿拖鞋的汉子,魔都中坚持长期主义的汽车电子工程师。 老规矩,分享一段喜欢的文字,避免自己成为高知识低文化的工程师: 做到欲望极简,了解自己的真实欲望,不受外在潮流的影响,不盲从,不跟风。把自己的精力全部用在自己。一是去掉多余,凡事找规律,基础是诚信;二是…...

js 设置3秒后执行

如何在JavaScript中延迟3秒执行操作 在JavaScript中&#xff0c;要设置一个操作在指定延迟后&#xff08;例如3秒&#xff09;执行&#xff0c;可以使用 setTimeout 函数。setTimeout 是JavaScript的核心计时器方法&#xff0c;它接受两个参数&#xff1a; 要执行的函数&…...

在Zenodo下载文件 用到googlecolab googledrive

方法&#xff1a;Figshare/Zenodo上的数据/文件下载不下来&#xff1f;尝试利用Google Colab &#xff1a;https://zhuanlan.zhihu.com/p/1898503078782674027 参考&#xff1a; 通过Colab&谷歌云下载Figshare数据&#xff0c;超级实用&#xff01;&#xff01;&#xff0…...

Android Framework预装traceroute执行文件到system/bin下

文章目录 Android SDK中寻找traceroute代码内置traceroute到SDK中traceroute参数说明-I 参数&#xff08;使用 ICMP Echo 请求&#xff09;-T 参数&#xff08;使用 TCP SYN 包&#xff09; 相关文章 Android SDK中寻找traceroute代码 设备使用的是Android 11&#xff0c;在/s…...