微信小程序之animation底部弹窗动画(两种方法)
发布时间:2020-12-14 19:32:01 所属栏目:资源 来源:网络整理
导读:简单分享一下常用的底部弹窗层或下拉框弹出层(代码需要修改)的内容弹窗的动画效果,这里分享的是点击按钮后底部弹窗的动画效果。第一种方式是动态设置显示区域的高度,第二种方法是动态设置显示区域的移动的位置(使用到? transform:translateY ?); (一
简单分享一下常用的底部弹窗层或下拉框弹出层(代码需要修改)的内容弹窗的动画效果,这里分享的是点击按钮后底部弹窗的动画效果。第一种方式是动态设置显示区域的高度,第二种方法是动态设置显示区域的移动的位置(使用到? (一)实现效果简单说明一下,两种方法实现的效果是一样的,只有点击按钮才能出发弹窗(指定位置),弹窗弹出后,只有点击背景灰色区域弹窗才能收回,点击弹窗内容区域(粉红色部分是不能收回弹窗的),自己可以自定义粉红色部分右上角关闭按钮。 (二)实现分析
(三)实现代码第一种动态设置高度方法实现:1、wxml代码: <button catchtap='clickPup'>点击底部动画弹窗</button>
<!-- 底部弹窗动画的内容 -->
<view class='pupContent {{click? "showContent": "hideContent"}} {{option? "open": "close"}}' hover-stop-propagation='true'>
<'pupContent-top'>测试一下</view>
</view>
<!-- 固定的背景 -->
<'pupContentBG {{click?"showBG":"hideBG"}{{option?"openBG":"closeBG"}}' catchtap='clickPup'>
</view>
复制代码
2、wxss代码: .pupContentBG {
width: 100vw;
height: 100vh;
position: fixed;
top: 0;
}
.pupContent {
100%;
background: pink;
position: absolute;
bottom: 0;
box-shadow: 0 10rpx #333;
z-index: 999;
}
/* 设置显示的背景 */
.showBG {
display: block;
}
.hideBG {
display: none;
}
/* 弹出或关闭动画来动态设置内容高度 */
@keyframes slideBGtUp {
from {
background: transparent;
}
to {
background: rgba(0,0.1);
}
}
@keyframes slideBGDown {
background: transparent;
}
}
/* 显示或关闭内容时动画 */
.openBG {
animation: slideBGtUp 0.5s ease-in both;
/* animation-fill-mode: both 动画将会执行 forwards 和 backwards 执行的动作。 */
}
.closeBG {
animation: slideBGDown /* animation-fill-mode: both 动画将会执行 forwards 和 backwards 执行的动作。 */
}
/* 设置显示内容 */
.showContent {
.hideContent {
keyframes slideContentUp {
0;
}
800rpx;
}
}
@keyframes slideContentDown {
800rpx;
}
0;
}
}
.open {
animation: slideContentUp .close {
animation: slideContentDown /* animation-fill-mode: both 动画将会执行 forwards 和 backwards 执行的动作。 */
}
复制代码
3、js代码: data: {
click: false,//是否显示弹窗内容
option: //显示弹窗或关闭弹窗的操作动画
},136);">// 用户点击显示弹窗
clickPup: function() {
let _that = this;
if (!_that.data.click) {
_that.setData({
click: true,})
}
if (_that.data.option) {
_that.setData({
option: // 关闭显示弹窗动画的内容,不设置的话会出现:点击任何地方都会出现弹窗,就不是指定位置点击出现弹窗了
setTimeout(() => {
_that.setData({
click: 500)
} else {
_that.setData({
option: true
})
}
},复制代码
第二种动态平移内容区域位置方法实现:相对于第一种代码修改的部分:只修改的了粉红色区域的高度和粉红色区域弹出和收回的动画效果: transform: translateY(100%); /*设置为正数则底部弹出来,负数则相反*/
}
translateY(0%);
}
}
@translateY(0%);
}
translateY(100%);
}
}
复制代码
参考资料:
感谢阅读。(编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |