使用绝对定位和动画实现如上效果:
wxml
<!--pages/testhongbao/index.wxml-->
<text>pages/testhongbao/index.wxml</text>
<text>pages/testhongbao/index.wxml</text>
<text>pages/testhongbao/index.wxml</text>
<text>pages/testhongbao/index.wxml</text>
<view class="fd">
<view class="dtop {{onHide?'slide-top':''}}">
<view class="gxfc">恭喜发财,大吉大利</view>
<view class="lq" bindtap="tapHandle">開</view>
</view>
<view class="dbottom {{onHide?'slide-bottom':''}}" ></view>
</view>
wxss:
/* pages/testhongbao/index.wxss */
.slide-top {
-webkit-animation: slide-top 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
animation: slide-top 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}
.slide-bottom {
-webkit-animation: slide-bottom 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
animation: slide-bottom 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}
.fd {
position: fixed;
z-index: 998;
width: 100vw;
height: 100vh;
}
.fd .dtop {
z-index: 999;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 70vh;
border-radius: 0 0 30% 30%;
background-color: #f45e4d;
box-shadow: 0 5rpx 10rpx rgba(0, 0, 0, 0.2);
}
.fd .dtop .gxfc {
color: #fee3b2;
font-size: 60rpx;
width: 100%;
text-align: center;
position: absolute;
top: 40%;
}
.fd .dtop .lq {
width: 250rpx;
height: 250rpx;
border-radius: 50%;
background-color: #ebcd99;
font-weight: 900;
color: #333;
font-size: 100rpx;
text-align: center;
line-height: 250rpx;
position: absolute;
left: 50%;
bottom: -125rpx;
transform: translate(-50%);
box-shadow: 0 5rpx 10rpx rgba(0, 0, 0, 0.5);
}
.fd .dbottom {
position: absolute;
width: 100%;
bottom: 0;
left: 0;
height: 50vh;
background-color: #f25542;
}
@-webkit-keyframes slide-bottom {
0% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
100% {
-webkit-transform: translateY(100%);
transform: translateY(100%);
}
}
@keyframes slide-bottom {
0% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
100% {
-webkit-transform: translateY(100%);
transform: translateY(100%);
}
}
@-webkit-keyframes slide-top {
0% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
100% {
-webkit-transform: translateY(-120%);
transform: translateY(-120%);
}
}
@keyframes slide-top {
0% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
100% {
-webkit-transform: translateY(-120%);
transform: translateY(-120%);
}
}
js:
// pages/testhongbao/index.js
Page({
/**
* 页面的初始数据
*/
data: {
onHide:false,
Show:true,
},
/**
* 生命周期函数--监听页面加载
*/
onLoad(options) {
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady() {
},
/**
* 生命周期函数--监听页面显示
*/
onShow() {
},
tapHandle(){
this.setData({
onHide:true
})
}
})
json:
{
"usingComponents": {},
"navigationStyle": "custom"
}