微信小程序红包封面动画

使用绝对定位和动画实现如上效果: 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"
}