内容简介:简单分享一下常用的底部弹窗层或下拉框弹出层(代码需要修改)的内容弹窗的动画效果,这里分享的是点击按钮后底部弹窗的动画效果。第一种方式是动态设置显示区域的高度,第二种方法是动态设置显示区域的移动的位置(使用到简单说明一下,两种方法实现的效果是一样的,只有点击按钮才能出发弹窗(指定位置),弹窗弹出后,只有点击背景灰色区域弹窗才能收回,点击弹窗内容区域(粉红色部分是不能收回弹窗的),自己可以自定义粉红色部分右上角关闭按钮。1、wxml代码:
简单分享一下常用的底部弹窗层或下拉框弹出层(代码需要修改)的内容弹窗的动画效果,这里分享的是点击按钮后底部弹窗的动画效果。第一种方式是动态设置显示区域的高度,第二种方法是动态设置显示区域的移动的位置(使用到 transform:translateY
);
(一)实现效果
简单说明一下,两种方法实现的效果是一样的,只有点击按钮才能出发弹窗(指定位置),弹窗弹出后,只有点击背景灰色区域弹窗才能收回,点击弹窗内容区域(粉红色部分是不能收回弹窗的),自己可以自定义粉红色部分右上角关闭按钮。
(二)实现分析
- 第一种动态设置高度的方法是:需要一个容器为背景色(灰色区域),一个容器为弹窗内容(粉红色区域),两者是独立的,实现的原理是一样的;粉红色区域的话,就是设置好绝对位置(在屏幕的底部)和默认内容的区域样式,动态设置内容区域的高度,比如弹出:一开始高度为0(隐藏了),通过animation设置的动画时间,将高度从0到指定高度,内容慢慢就会显示了,然后保留最后一帧的动画样式就行了;收缩也是一样的道理。
- 第二种动态设置位置的方法是:需要一个容器为背景色(灰色区域),一个容器为弹窗内容(粉红色区域),两者是独立的,实现的原理是一样的;粉红色区域的话,就是设置好绝对位置(在屏幕的底部)和默认内容的区域样式,比如弹出:一开始粉红色区域的位置平移在屏幕外(隐藏了),通过animation设置的动画时间,将粉红色区域从屏幕外平移到屏幕内(默认设置在屏幕底部的位置),内容慢慢就会显示了,然后保留最后一帧的动画样式就行了;收缩也是一样的道理。 代码也有注释哈。
(三)实现代码
第一种动态设置高度方法实现:
1、wxml代码:
<button catchtap='clickPup'>点击底部动画弹窗</button> <!-- 底部弹窗动画的内容 --> <view class='pupContent {{click? "showContent": "hideContent"}} {{option? "open": "close"}}' hover-stop-propagation='true'> <view class='pupContent-top'>测试一下</view> </view> <!-- 固定的背景 --> <view class='pupContentBG {{click?"showBG":"hideBG"}} {{option?"openBG":"closeBG"}}' catchtap='clickPup'> </view> 复制代码
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%); } } 复制代码
参考资料:
感谢阅读。
以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网
猜你喜欢:- 小程序以及H5页面上IphoneX底部安全区域小黑条适配问题
- 紧贴底部的页脚
- Android实现底部状态栏切换
- 定制化你的ReactNative底部导航栏
- 项目实践-MD设计-底部菜单栏(一)
- 深耕业务——商品列表底部分销商品资源广告位
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
Facebook效应
[美] 大卫·柯克帕特里克 / 沈路、梁军、崔筝 / 华文出版社 / 2010-10 / 49.80
本书作者近距离地采访了与Facebook相关的人士,其中包括Facebook的创始人、员工、投资人、意向投资人以及合作伙伴,加起来超过了130人。这是真切详实的访谈,更是超级精彩的故事。作者以其细腻的笔触,精巧的叙事结构,解密了Facebook如何从哈佛的宿舍里萌发,创始人的内讧,权力之争,如何放弃华盛顿邮报的投资,怎样争取到第一个广告客户,而第一轮融资又如何获得一亿美元的估值,让人痴迷的图片产品......一起来看看 《Facebook效应》 这本书的介绍吧!