当前位置: 首页 > 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;
}
http://www.lryc.cn/news/255005.html

相关文章:

  • STM32CubeIDE(CUBE-MX hal库)----RTC时钟,时钟实时显示
  • ubuntu 安装Nvidia驱动
  • 『亚马逊云科技产品测评』活动征文|基于亚马逊云EC2搭建PG开源数据库
  • 【开题报告】基于J2EE的高校水电费管理系统的设计与实现
  • Revisiting Proposal-based Object Detection阅读笔记
  • Docker部署NFS服务
  • 深度学习TensorFlow2基础知识学习后半部分
  • 电脑系统重装Win10专业版操作教程
  • 打包Python项目
  • 使用Python实现爬虫IP负载均衡和高可用集群
  • Jenkins+Maven+Gitlab+Tomcat 自动化构建打包,部署
  • 泰凌微(Telink)8258配置串口收发自定义数据
  • 入门低代码开发:快速构建应用程序的方法
  • 常见客户端消息推送服务【Java后端】
  • C++11(下)
  • 深度学习与逻辑回归模型的融合--TensorFlow多元分类的高级应用
  • 水库大坝安全监测参数与设备
  • 要求CHATGPT高质量回答的艺术:提示工程技术的完整指南—第 22 章:情感分析提示
  • 数据清洗、特征工程和数据可视化、数据挖掘与建模的主要内容
  • C++ STL容器与常用库函数
  • Nmap脚本简介
  • Kafka -- 初识
  • 玩转Sass:掌握数据类型!
  • Django + Matplotlib:实现数据分析显示与下载为PDF或SVG
  • 【Rust】第一节:安装
  • 12-07 周四 Pytorch 使用Visdom 进行可视化
  • 基于微信小程序的智慧校园导航系统研究
  • VUE3给table的head添加popover筛选、时间去除时分秒、字符串替换某字符
  • 19、XSS——HTTP协议安全
  • 深圳锐杰金融:用金融力量守护社区健康