当前位置: 首页 > 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;搜索书名即可。内容涵盖数据科学…...

超短脉冲激光自聚焦效应

前言与目录 强激光引起自聚焦效应机理 超短脉冲激光在脆性材料内部加工时引起的自聚焦效应&#xff0c;这是一种非线性光学现象&#xff0c;主要涉及光学克尔效应和材料的非线性光学特性。 自聚焦效应可以产生局部的强光场&#xff0c;对材料产生非线性响应&#xff0c;可能…...

【HarmonyOS 5.0】DevEco Testing:鸿蒙应用质量保障的终极武器

——全方位测试解决方案与代码实战 一、工具定位与核心能力 DevEco Testing是HarmonyOS官方推出的​​一体化测试平台​​&#xff0c;覆盖应用全生命周期测试需求&#xff0c;主要提供五大核心能力&#xff1a; ​​测试类型​​​​检测目标​​​​关键指标​​功能体验基…...

CMake基础:构建流程详解

目录 1.CMake构建过程的基本流程 2.CMake构建的具体步骤 2.1.创建构建目录 2.2.使用 CMake 生成构建文件 2.3.编译和构建 2.4.清理构建文件 2.5.重新配置和构建 3.跨平台构建示例 4.工具链与交叉编译 5.CMake构建后的项目结构解析 5.1.CMake构建后的目录结构 5.2.构…...

ESP32读取DHT11温湿度数据

芯片&#xff1a;ESP32 环境&#xff1a;Arduino 一、安装DHT11传感器库 红框的库&#xff0c;别安装错了 二、代码 注意&#xff0c;DATA口要连接在D15上 #include "DHT.h" // 包含DHT库#define DHTPIN 15 // 定义DHT11数据引脚连接到ESP32的GPIO15 #define D…...

c++ 面试题(1)-----深度优先搜索(DFS)实现

操作系统&#xff1a;ubuntu22.04 IDE:Visual Studio Code 编程语言&#xff1a;C11 题目描述 地上有一个 m 行 n 列的方格&#xff0c;从坐标 [0,0] 起始。一个机器人可以从某一格移动到上下左右四个格子&#xff0c;但不能进入行坐标和列坐标的数位之和大于 k 的格子。 例…...

成都鼎讯硬核科技!雷达目标与干扰模拟器,以卓越性能制胜电磁频谱战

在现代战争中&#xff0c;电磁频谱已成为继陆、海、空、天之后的 “第五维战场”&#xff0c;雷达作为电磁频谱领域的关键装备&#xff0c;其干扰与抗干扰能力的较量&#xff0c;直接影响着战争的胜负走向。由成都鼎讯科技匠心打造的雷达目标与干扰模拟器&#xff0c;凭借数字射…...

GC1808高性能24位立体声音频ADC芯片解析

1. 芯片概述 GC1808是一款24位立体声音频模数转换器&#xff08;ADC&#xff09;&#xff0c;支持8kHz~96kHz采样率&#xff0c;集成Δ-Σ调制器、数字抗混叠滤波器和高通滤波器&#xff0c;适用于高保真音频采集场景。 2. 核心特性 高精度&#xff1a;24位分辨率&#xff0c…...

laravel8+vue3.0+element-plus搭建方法

创建 laravel8 项目 composer create-project --prefer-dist laravel/laravel laravel8 8.* 安装 laravel/ui composer require laravel/ui 修改 package.json 文件 "devDependencies": {"vue/compiler-sfc": "^3.0.7","axios": …...

JVM虚拟机:内存结构、垃圾回收、性能优化

1、JVM虚拟机的简介 Java 虚拟机(Java Virtual Machine 简称:JVM)是运行所有 Java 程序的抽象计算机,是 Java 语言的运行环境,实现了 Java 程序的跨平台特性。JVM 屏蔽了与具体操作系统平台相关的信息,使得 Java 程序只需生成在 JVM 上运行的目标代码(字节码),就可以…...

代码规范和架构【立芯理论一】(2025.06.08)

1、代码规范的目标 代码简洁精炼、美观&#xff0c;可持续性好高效率高复用&#xff0c;可移植性好高内聚&#xff0c;低耦合没有冗余规范性&#xff0c;代码有规可循&#xff0c;可以看出自己当时的思考过程特殊排版&#xff0c;特殊语法&#xff0c;特殊指令&#xff0c;必须…...