小程序底部弹窗css_微信小程序之animation底部弹窗动画(两种方法)

简单分享一下常用的底部弹窗层或下拉框弹出层(代码需要修改)的内容弹窗的动画效果,这里分享的是点击按钮后底部弹窗的动画效果。第一种方式是动态设置显示区域的高度,第二种方法是动态设置显示区域的移动的位置(使用到 transform:translateY );

(一)实现效果

96111d96efecd3a4737c66733ffe0537.gif

简单说明一下,两种方法实现的效果是一样的,只有点击按钮才能出发弹窗(指定位置),弹窗弹出后,只有点击背景灰色区域弹窗才能收回,点击弹窗内容区域(粉红色部分是不能收回弹窗的),自己可以自定义粉红色部分右上角关闭按钮。

(二)实现分析

第一种动态设置高度的方法是:需要一个容器为背景色(灰色区域),一个容器为弹窗内容(粉红色区域),两者是独立的,实现的原理是一样的;粉红色区域的话,就是设置好绝对位置(在屏幕的底部)和默认内容的区域样式,动态设置内容区域的高度,比如弹出:一开始高度为0(隐藏了),通过animation设置的动画时间,将高度从0到指定高度,内容慢慢就会显示了,然后保留最后一帧的动画样式就行了;收缩也是一样的道理。

第二种动态设置位置的方法是:需要一个容器为背景色(灰色区域),一个容器为弹窗内容(粉红色区域),两者是独立的,实现的原理是一样的;粉红色区域的话,就是设置好绝对位置(在屏幕的底部)和默认内容的区域样式,比如弹出:一开始粉红色区域的位置平移在屏幕外(隐藏了),通过animation设置的动画时间,将粉红色区域从屏幕外平移到屏幕内(默认设置在屏幕底部的位置),内容慢慢就会显示了,然后保留最后一帧的动画样式就行了;收缩也是一样的道理。 代码也有注释哈。

(三)实现代码

第一种动态设置高度方法实现:

1、wxml代码:

点击底部动画弹窗 测试一下 复制代码

2、wxss代码:

.pupContentBG {

width: 100vw;

height: 100vh;

position: fixed;

top: 0;

}

.pupContent {

width: 100%;

background: pink;

position: absolute;

bottom: 0;

box-shadow: 0 0 10rpx #333;

height: 0;

z-index: 999;

}

/* 设置显示的背景 */

.showBG {

display: block;

}

.hideBG {

display: none;

}

/* 弹出或关闭动画来动态设置内容高度 */

@keyframes slideBGtUp {

from {

background: transparent;

}

to {

background: rgba(0, 0, 0, 0.1);

}

}

@keyframes slideBGDown {

from {

background: rgba(0, 0, 0, 0.1);

}

to {

background: transparent;

}

}

/* 显示或关闭内容时动画 */

.openBG {

animation: slideBGtUp 0.5s ease-in both;

/* animation-fill-mode: both 动画将会执行 forwards 和 backwards 执行的动作。 */

}

.closeBG {

animation: slideBGDown 0.5s ease-in both;

/* animation-fill-mode: both 动画将会执行 forwards 和 backwards 执行的动作。 */

}

/* 设置显示内容 */

.showContent {

display: block;

}

.hideContent {

display: none;

}

/* 弹出或关闭动画来动态设置内容高度 */

@keyframes slideContentUp {

from {

height: 0;

}

to {

height: 800rpx;

}

}

@keyframes slideContentDown {

from {

height: 800rpx;

}

to {

height: 0;

}

}

/* 显示或关闭内容时动画 */

.open {

animation: slideContentUp 0.5s ease-in both;

/* animation-fill-mode: both 动画将会执行 forwards 和 backwards 执行的动作。 */

}

.close {

animation: slideContentDown 0.5s ease-in both;

/* animation-fill-mode: both 动画将会执行 forwards 和 backwards 执行的动作。 */

}

复制代码

3、js代码:

data: {

click: false, //是否显示弹窗内容

option: false, //显示弹窗或关闭弹窗的操作动画

},

// 用户点击显示弹窗

clickPup: function(){

let _that = this;

if (!_that.data.click) {

_that.setData({

click: true,

})

}

if (_that.data.option) {

_that.setData({

option: false,

})

// 关闭显示弹窗动画的内容,不设置的话会出现:点击任何地方都会出现弹窗,就不是指定位置点击出现弹窗了

setTimeout(() => {

_that.setData({

click: false,

})

}, 500)

} else {

_that.setData({

option: true

})

}

},

复制代码

第二种动态平移内容区域位置方法实现:

相对于第一种代码修改的部分:只修改的了粉红色区域的高度和粉红色区域弹出和收回的动画效果:

/* 弹出或关闭动画来动态设置内容高度 */

@keyframes slideContentUp {

from {

transform: translateY(100%); /*设置为正数则底部弹出来,负数则相反*/

}

to {

transform: translateY(0%);

}

}

@keyframes slideContentDown {

from {

transform: translateY(0%);

}

to {

transform: translateY(100%);

}

}

复制代码

参考资料:

感谢阅读。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/505835.shtml

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

相关文章

js cookie 存储checkbox_浏览器数据存储方式总结,网友:“精辟”!

今天主要来讲下前端的数据存储,说起数据存储,大家肯定第一时间想起cookie,localstorage,sessionstorage,而其实还有userData和IndexedDB这两种数据存储,接下来将对它们进行一个比较详细的总结一、为什么要进…

mysql获取一个表的数据作为值插入_请问如何在mysql中得到一个即将插入数据表中的那条数据的id值(id自增长)?...

我们在写数据库程序的时候,经常会需要获取某个表中的最大序号数,一般情况下获取刚插入的数据的id,使用select max(id) from table 是可以的。但在多线程情况下,就不行了。下面介绍三种方法(1) getGeneratedKeys()方法:程序片断:Connection conn ;Serial…

navigator工具_Javascript常用工具类

就算现今是以框架为主流的前端,依然离不开JS,因为他是框架底层的一部分。我先上传代码截图(截图显示会更好看点),截图后面有带源码(源码方便大家复制)。/** * 文件描述:js项目开发中的常用方法工具 * *//** * 全局常量 */var DEFAULT_LINE_KE…

tail将输出的日志放到文件中_如何将Spring Boot应用中日志输出格式改为JSON?

作者:DEV出自:解道JDON原文:jdon.com/55006今天,我们有了一类称为日志聚合系统的应用程序。当我们拥有大量微服务并且我们希望跨微服务跟踪日志时,日志聚合很有用。传统的Java应用程序日志如下所示:2020-09…

造轮子是什么意思_程序员为什么热衷于造轮子,升职加薪吗?

作者:小傅哥博客: https://bugstack.cn-沉淀、分享、成长,让自己和他人都能有所收获!一、前言哪个架构师没造过轮子?你想过这样一件事吗? 是先具备能力在安排职位,还是先安排职位在学习&#xf…

mysql 查看当前数据库编码方式_MySQL查看与修改当前数据库编码的方法

MySQL中,数据库的编码是一个相当重要的问题,有时候我们需要查看一下当前数据库的编码,甚至需要修改一下数据库编码。查看当前数据库编码的SQL语句为:mysql> use xxxDatabase changedmysql> show variables like character_s…

阿里云 服务器 系统 php mysql_阿里云服务器配环境(Ubuntu 16.04+Nginx+MySQL+PHP)并部署hexo博客...

购买服务器阿里云向学生出售优惠价格的服务器,一个月只需9.5块,具体配置看图吧更新Ubuntu源,安装Git123sudo apt updatesudo apt upgradesudo apt-get install git配置Nginx安装Nginxsudo apt install nginx开启Nginx服务sudo service nginx …

python web开发项目 源码_Python + Flask 项目开发实践系列七

对于 Python Flask 这种灵活的web开发框架,在前面的六个系列文章中详细的进行了说明,主要讲到了页面的首页加载时的页面渲染,增加功能,删除功能,修改功能,查询功能,查询详情功能等一些页面常见…

python垃圾回收 采用方式_python-面向对象-10-__del__析构方法/垃圾回收机制

Python语言自带垃圾回收机制,为了能够比较清楚说明白Python的垃圾回收机制的原理,我们今天就从最底层的解释器开始,采用由内到外的方式来说明。1.Python默认解释器CPythonPython语言拥有多种解释器,但是默认采用CPython实现。CPyt…

回调函数 相当于线程_阿里面试题:请简述下 Node 的线程模型

前言如果你有一定的前端基础,比如 HTML、CSS、JavaScript、jQuery;那么,Node.js 能让你以最低的成本快速过渡成为一个全栈工程师(我称这个全栈为伪全栈,我认为的全栈也要精通数据库,不喜勿喷),从而触及后端…

微信小程序 本地mysql_微信小程序系列之使用缓存在本地模拟服务器数据库

微信小程序系列之使用缓存在本地模拟服务器数据库现在将data.js这个文件视作是本地数据库的初始化数据,要做的第一件事就是讲这些初始化数据装进缓存中,以形成数据库的初始化数据整个应用程序的生命周期,类比一下页面的生命周期,在…

jvm垃圾回收机制_JVM 垃圾回收机制之堆的分代回收

JVM垃圾回收机制之堆的分代回收前言前文我们了解了Java的GC机制,对于堆中的对象,JVM采用引用计数和可达性分析两种算法来标记对象是否可以清除,本文中我们还会了解到JVM将对分成了不同的区域,以便于更好的回收对象。堆的分代Java的…

roadhog不是内部或外部命令_git:git 不是内部或外部命令,也不是可运行的程序

出现git 不是内部或外部命令,也不是可运行的程序解决方案:Windows下配置Git1、从git官网下载windows版本的git:http://git-scm.com/downloads或是从该链接下载对应版本:https://github.com/git-for-windows/git/releases/tag/v2.1…

前端设定项目奖金有多少_【系列二】建筑工程项目激励模式探讨

​​建筑工程一般以项目制的形式运作,如何在这种“一次性”的组织形式下,确保项目符合质量、安全、进度等方面的要求,并确保项目的经济效益,对项目人员实施恰当的项目激励是关键。我们认为,建筑工程项目的激励主要包括…

mysql的分页怎么不对_jsp+mysql分页显示我的怎么不对啊?显示始终不对!

String path request.getContextPath();String basePath request.getScheme()"://"request.getServerName()":"request.getServerPort()path"/";%>My JSP wel.jsp starting page登陆成功!恭喜恭喜! 返回重新登录用户…

python没有这个xlwt模块_python xlwt模块简介

importxlwtclassWorkbook(object0):工作簿类,使用xlwt创建excel文件时,首先要实例化此类的对象def __init__(self, encodingascii, style_compression0):passdef add_sheet(self,sheetname, cell_overwrite_okFalse):在工作簿中创建工作表:param sheetna…

presto联合查询mysql和ES_presto-mysql/elasticsearch6.0.0安装部署测试,异种数据源关联查询入门实践...

本文简单记录一次实践使用过程&#xff0c;涉及presto-mysql,presto-elasticsearch&#xff0c;文中参数未做注释&#xff0c;请参考官方文档&#xff0c;希望能帮到大家1 下载安装 presto-0.228<1>下载服务端客户端相关jar<2>安装&#xff1a;1> 解压tar -zxvf…

xss过滤器无法处理ajax请求_thunkPHP 预防XSS攻击

比如在有人恶意在你的输入框中或文本域中输入<script>标签&#xff0c;如果不做处理的话&#xff0c;输入框中的<script>会保存到我们数据库中&#xff0c;等到将这个数据拿出来展示的时候&#xff0c;就等于将这个内容放入到了html代码中&#xff0c;那么这个<…

mysql bcmod_nextcloud网盘搭建:Ubuntu18.04+Nginx+Mysql

背景前几天在windows系统上搭建了一个seafile网盘服务器&#xff0c;在试用时对它的功能还是比较满意的&#xff0c;有保存文件&#xff0c;共享文件&#xff0c;小组讨论和小组文件共享等功能&#xff0c;基本上可以满足项目式学习的需求。不过在第一节课上课试用时(一个班大概…

mysql mode_MYSQL中的sql_mode模式

mysql数据库的中有一个环境变量sql_mode,定义了mysql应该支持的sql语法&#xff0c;数据校验等&#xff01;我们可以通过以下方式查看当前数据库使用的sql_mode&#xff1a;mysql>select sql_mode一&#xff0c;sql_mode值的含义ONLY_FULL_GROUP_BY对于GROUP BY聚合操作&…