关于一个很坑的弹层动画

React Native之如何让一个自适应高度的弹层的弹框上下垂直居中 需求描述: 弹层中的弹框中银行标题以及内容都是接口请求的数据,目前布局是标题框和底部确定按钮是高度和宽度固定,中间的内容部分给了最低高度并且可以随内容增多而高度自适应。现在,产品需要这个不定高度的弹框可以垂直居中显示。尝试的解决办法有以下两种: 方案一: 由于我使用的是Animated动画,首先让遮罩层淡入,再让弹框从下到上的上移,使用的是将弹框绝对定位,需要bo 阅读详情

今天写代码碰到个很坑的动画~!不过还是解决的!很有成就感,发篇博文记录下。

业务逻辑是这样的 底部是个ListView列表 要求在ListView上弹出一层里面是个GridView列表,本来想用Dialog或者PopupWindow来实现但是要求弹层的同时下面的一层在不关闭弹层的情况下也可以触发点击事件,所以就放弃了。

想了很久用一个RelativeLayout包住ListView和GridView 并把GridView隐藏,然后点击Button来显示或隐藏GridView,但是GridView显示后再获夺取上下滑动事件,下面的ListView上下滑动不了,隐藏GridView也是一样ListView上下滑动不了,很是郁闷啊。试了很多种方法 修改了动画的结果也是一样,最后把GridView的高度设为0,下面的ListView就可以出发滑动事件了,终于找到方法了,哈哈,然后就改成,在GridView隐藏的时候把GridView的高度设置为0,在GridView显示的时候在把高度设置回来问题就解决~!

如果有动画的话 就在动画时间结束后把GridView的高度设置为o,下面控制的代码贴出来:

button.setOnClickListener(new View.OnClickListener() {
			@Override
			public void onClick(View v) {
				final ViewWrapper wrapper = new ViewWrapper(playMannerV);//view包装类里面实现了添加高宽很获取高宽的方法
				if (wrapper.getHeight() == 0) {//如果弹层的高度是0
					wrapper.setHeight(LayoutParams.WRAP_CONTENT);//给弹层设定高度为内容包裹
					playMannerV.startAnimation(AnimationUtils.loadAnimation(SoccerOrderActivity.this, R.anim.bottom_in));//执行显示动画
				} else {
					playMannerV.startAnimation(AnimationUtils.loadAnimation(SoccerOrderActivity.this, R.anim.bottom_out));//先执行隐藏动画
					new Handler().postDelayed(new Runnable() {
						@Override
						public void run() {
							wrapper.setHeight(0);//设弹层的高度为0
						}
					}, 300);//动画时间是300毫秒 所以这里设定在动画执行完成后设置高度为0
				}
			}
		});


前端必备弹层组件Layer提示层实战详解 通过skin添加类名:然后在 CSS 中覆盖样式:建议封装工厂函数统一调用:anim: 2,btn: ['我知道了'] 阅读详情

相关推荐

Ruoyi-Cloud集成Seata2.0实现分布式事务

在网络上,关于Spring Cloud和Ruoyi-Cloud整合Seata的教程有很多,针对不同版本的 Seata 也有不少相关教程。事实上,无论是 Spring Cloud 还是 Ruoyi-Cloud,其整合 Seata 的原理基本相同。这篇博文将详细介绍如何在本地开发环境下,在中实现Seata 2.0的整合,希望能为大家在分布式项目中实现 Seata 的整合提供实用的帮助,提供一个清晰的操作思路。

SR003的博客 2244

在vue-element-ui的时候 如果同时使用了animated会出现模态框层级显示错误问题

同时使用element-ui 和animated的时候 模态框的层级会出问题 这个时候需要做动画  最好还是用vue原带的动画组件transition和transition-group,然后自定义动画

qq_42227041的博客 899

微信小程序使用TCP通信

最终目的:在微信小程序内实现对局域网发起TCP通信实现步骤:建立TCP服务 + 小程序发起通信。

Big_YiFeng的博客 5611

发送 POST 请求出现异常!java.io.IOException: Server returned HTTP response code: 400 for URL:

http发送post请求报400,405,记录下原因: 报错如下: 发送 POST 请求出现异常!java.io.IOException: Server returned HTTP response code: 400 for URL: http://111.231.133.247:8083/jobScheduler/pendingJobjava.io.IOException: Server...

DwZ735660836的博客 2万+

STM32N6实战:FSBL引导XIP运行ThreadX与NetX Duo

在嵌入式系统开发中,程序的存储与执行方式直接影响启动速度和系统实时性。传统MCU常将代码拷贝到内存运行,而高主频处理器则可通过XIP(片外Flash原地执行)技术直接从外部存储取指,省去拷贝过程。但XIP的前提是外部存储器控制器需在上电后第一时间完成初始化,这正是FSBL(第一级引导程序)的核心职责。FSBL负责配置时钟与外部Flash,并将控制权移交给应用。而要让设备具备实时调度与网络能力,可搭配ThreadX实时内核和NetX Duo双协议栈,两者在CubeMX中原生集成,形成一套高性能MCU+外部存储

weixin_29191669的博客 317

Google AdSense收款前必做:W-8BEN税务认证的3个关键选择与1个提交时机小技巧

本文深入解析Google AdSense收款前必须完成的W-8BEN税务认证,重点介绍账号类型选择、特殊税率勾选、美国活动界定等3个关键决策,并分享提交时机的小技巧,帮助站长高效通过审核,确保广告收入顺利到账。

weixin_30443731的博客 671

Layer弹层组件完整指南:5分钟快速上手Web弹层开发

Layer是一款功能丰富的Web弹出层组件,可轻松实现Alert/Confirm/Prompt/普通提示/页面区块/iframe/tips等几乎所有的弹出交互,目前已成为最多人使用的弹层解决方案。通过本指南,你将快速掌握Layer的安装配置和基础使用方法,让Web弹层开发变得简单高效。 ## 为什么选择Layer弹层组件? Layer弹层组件凭借其丰富的功能和易用性,成为Web开发中首选的弹层

gitblog_00382的博客 901

lofar谱 matlab_一种用于分类识别的线谱增强及特征提取方法与流程

本发明属于声信号处理技术领域,具体涉及一种用于分类识别的线谱增强及特征提取方法。背景技术:水下声音目标的被动探测和识别领域中,利用舰船辐射噪声对舰船类型进行识别是十分常见的。舰船辐射噪声通常由机械噪声,螺旋桨噪声和水动力噪声三部分构成,前两种信号是噪声的线谱和连续谱的主要来源。其中线谱由于具有较高的信噪比,并且携带着声源特征信息,而被广泛研究和应用。但是目前的识别方法中,因为连续谱信息缺乏较为明确...

weixin_39517859的博客 5476

小程序 制作自定义弹层 添加弹层显示和隐藏动画 父组件与子组件(自定义组件)之间传值

0.说明与效果 本文打算用一个具体的例子,总结下这些开发过程中学习到的知识: 1.制作自定义组件,并在页面中引用 2.自定义组件的内容是一个表单弹层,添加弹层在弹出和隐藏时的动画 3.展示父组件与子组件(自定义组件)的传参功能 看下最终的效果图: 1.设置自定义组件,并在页面中引用 官网传送门其实步骤很简单 1.在跟目录中创建components目录(用于放置自定义组件,在此目录下再创建组件目录,新建组件时记得选择 ‘新建Component’ 即可 如果创建成功,打开js...

路漫漫其修远兮,吾将上下而求索 2442

F280049C Crossbar X-BAR

X-BAR不是一个功能模块,只起内部外设与外设之间,或内部外设与GPIO的连接作用。配置X-BAR的就是在配置信号之间的连接。确实如这一节的开头所言,X-BAR提供了以各种配置连接设备输入、输出和内部资源的灵活性。学完这一节也知道为什么crossbar(X-BAR)的中文翻译是交叉开关。

xht2403267701的博客 3048

数学之美:欣赏超越数e

文章目录一、e为何物?二、利息与e的关系1、利息问题2、计算利息3、欣赏螺旋线(1)螺旋线概述(2)绘制螺旋线三、e和π 一、e为何物? e是一个无限不循环小数,其值约等于2.718281828…,它是一个超越数,有时也称为欧拉数(Euler’s Number)。 以e为底的对数称为自然对数(Natural Logarithm),数学中使用自然这个词的还有自然数(Natural Number)。 这里的“自然”并不是现代人所习惯的“大自然”,而是有点儿“天然存在,非人为”的意思。 二、利息与e的关系

howard2005的专栏 1710

Layer弹层组件完整指南:快速掌握现代化Web弹层开发

作为当前最受欢迎的Web弹层解决方案,Layer组件以其简洁的API设计和丰富的功能特性,彻底改变了传统弹层开发的复杂性。无论你是开发信息提示、内容展示还是复杂交互,Layer都能提供专业级的支持。 ## 快速上手:5分钟搭建弹层系统 ### 环境配置与项目获取 要开始使用Layer,首先需要获取项目源码: ```bash git clone https://gitcode.com/gh_m

gitblog_00606的博客 995

uniapp [安卓苹果App端] - 实现集成微信一键登录及授权获取用户信息全流程源码,uniApp唤起微信客户端app实现微信授权头像昵称手机号(提供移动应用/开放平台/资质认证/签名/权限申请

uni-app,安卓Android,苹果ios,安卓app端,苹果App端,uniapp苹果安卓app,微信一键登录,uniapp项目App端实现微信登录,Uniapp实现微信授权登录,调起微信客户端授权用户信息,uniappapp端微信一键登录打开手机微信app,app端如何唤起用户本机微信应用并授权登陆,如何申请微信一键登录,uniapp实现APP微信登录流程,打开本地微信软件,接入微信登录,UniApp实现微信登录教程,获取头像昵称手机号用户数据,超详细实现微信登录功能,唤起没反应,授权失败,获取

🏆 前端领域优质创作者 1万+

Layui弹层交互终极指南:前端弹窗最佳实现方案

Layui的layer组件是前端开发中最经典、使用最广泛的弹层交互解决方案之一。作为一套遵循原生态开发模式的Web UI组件库,Layui为开发者提供了简单快速的网页界面构建方式,而其中的layer弹层组件更是集众多弹层功能于一体,灵活多样,成为许多开发者的首选弹窗方案。 ## 为什么选择Layui layer弹层组件? Layui layer组件拥有多个显著优势,使其在前端弹层交互领域脱颖而

gitblog_00891的博客 388

数学建模模型总结

这是本人在两年内准备参加数学建模竞赛搜集到的模型资料,已经经过了本人的筛选和整理,希望能够对准备参加数学建模竞赛的学弟学妹们提供一些帮助!

Camera2Demo

在Camera2 的基础上进行封装,使得Camera2一堆初始化逻辑与Activity分离,降低耦合度,完成预览拍照并保存的操作

layui弹层类型:alert、confirm、prompt等

还在为网页弹层交互而烦恼吗?layui的layer组件提供了丰富多样的弹层类型,从简单的信息提示到复杂的表单输入,都能轻松应对。本文将深入解析layui最常用的弹层类型,帮助你快速掌握弹层交互的精髓。 ## 弹层类型概览 layui的layer组件支持5种基础弹层类型,每种类型都有其特定的使用场景: ```mermaid flowchart TD A[layer弹层类型] --> B...

gitblog_00132的博客 1150

Probability and Statistics - 4th edition

Probability and Statistics - 4th edition

用css3实现鼠标移入在原来的层上面显示另一个层的动画效果

演示效果       这是当鼠标移入会在原来的层上显示另一个层的动画,我这个页面里有很多项都需要用这个效果,之前我想用js来实现这个效果,不过弹出来的层的位置不好固定,特别是页面里有太多这个效果,而最麻烦的还是当窗口缩小时弹出的层会乱飘,后来我使用css3动画来实现,不仅在切换间很流畅有一些酷炫的动画效果,而且代码很简洁。    1. 首先在一个.container-detailed的盒子

dengdengda的博客 1万+

jre9下载 jdk9

(Java SE Runtime Environment 9.0) 9.0u175 官方最新版 【x86|x64】

Layui 弹层组件 - 基础参数3

id - 用于控制弹层唯一标识 类型:String,默认:空字符 设置该值后,不管是什么类型的层,都只允许同时弹出一个,一般用于页面层和iframe层模式。 anim - 弹出动画 类型:Number,默认:0 我们的出场动画全部采用CSS3。这意味着除了ie6-9,其它所有浏览器都是支持的。目前anim可支持的动画类型有0-6 如果不想显示动画,设置 anim: -1 即可。另外需要注意的是,...

阿甘兄 1013

ZJAnimationPopView:打造独特动画弹框体验

ZJAnimationPopView:打造独特动画弹框体验 在现代移动应用中,用户交互体验的优劣往往决定了应用的受欢迎程度。ZJAnimationPopView 是一个专为 iOS 开发者设计的动画弹框库,它支持丰富的动画效果,让应用的弹框展示更加生动、引人注目。 项目介绍 ZJAnimationPopView 是一个快速、便捷、无侵入、可扩展的动画弹框库。开发者仅需两句代码,即可实现想要的动画弹...

gitblog_00689的博客 970

如何使用React Native Elements打造惊艳底部弹层:BottomSheet组件完全指南

React Native Elements是一个功能强大的跨平台UI工具包,为移动应用开发提供了丰富的组件库。其中BottomSheet组件作为一种优雅的交互方式,能够在不打断用户流程的情况下展示额外内容,提升应用的用户体验。本文将详细介绍如何使用React Native Elements的BottomSheet组件,从基础配置到高级用法,帮助你轻松实现专业级底部弹层效果。 ## BottomS

gitblog_00927的博客 904

MTPopup,Android一个简单强大的弹框

断断续续地,利用工作之余的不少时间才整合了这个XPopup。虽然没啥高深的技术,但是我认为这个库能给大家在项目上带来些许方便吧,使用它,大家就不必频繁的新建class了,直接链式调用,差不多所有的逻辑都可在上面完成,并且覆盖了Android所有的弹框类型,总结起来就是调用简单、功能强大。 ...

黄小梁的博客 4058

弹层动画,从下往上 fadein

weixin_42777161的博客 58

Layer弹层组件3.5.1终极指南:为什么它成为最受欢迎的Web弹层解决方案

Layer是一款功能丰富、使用简单的Web弹层组件,目前已成为最多人使用的弹层解决方案。作为Web开发者的必备工具,Layer可以帮助你快速实现各种弹层交互效果,包括Alert、Confirm、Prompt、普通提示、页面区块、iframe、tips等几乎所有弹出场景。无论你是前端新手还是资深开发者,Layer都能让你的弹层开发工作变得更加高效和愉悦。 ## 🚀 Layer核心特性详解 ##

gitblog_00212的博客 475

Layer弹层组件终极使用指南:从入门到精通

Layer弹层组件是一款功能强大且易于使用的前端弹窗解决方案,能够帮助开发者快速实现各种交互效果。无论是简单的消息提示、复杂的表单弹窗,还是加载状态展示,Layer都能提供高效的支持,让你的网页交互体验更上一层楼。 ## 为什么选择Layer弹层组件? Layer弹层组件凭借其轻量高效、配置灵活和美观的界面设计,成为众多开发者的首选。它不仅支持多种弹窗类型,还提供了丰富的自定义选项,能够满足不

gitblog_01017的博客 607

layui弹层定位:自定义位置与动画效果

还在为弹层位置不够灵活而烦恼吗?还在寻找更优雅的弹层动画效果吗?layui的layer组件提供了强大的弹层定位和动画配置能力,让你可以轻松实现各种复杂的弹层交互场景。本文将深入解析layer组件的定位和动画功能,帮助你掌握弹层自定义的精髓。 ## 读完本文你能得到 - ✅ 掌握layer弹层的8种基本定位方式 - ✅ 学会使用精确坐标控制弹层位置 - ✅ 了解14种内置动画效果及其适用场景 -...

gitblog_01152的博客 586

Qt自定义一个带动画的桌面弹框

这次制作的桌面右下角弹框,主要功能有透明度和位置动画、定时关闭。对于动画,我用的QPropertyAnimation 属性动画配合动画组。然后根据设置来决定启用哪些动画、是否定时关闭等。

龚建波 8976

An动画优化之传统引导层动画

An动画优化之传统引导层动画

人生得意须尽欢 5412
上一篇: 关于Android Dialog全屏显示
下一篇: Collections中的常用方法及排序
Return_Code
博客等级 码龄14年 8粉丝 11原创
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付:10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值