自定义实现小程序的动画弹框/提示框

/* pages/customalertbox/customalertbox.wxss */.click-btn {  width: 120px;  height: 40px;  line-height: 40px;  text-align: center;  margin: 20px auto;  border: 1px solid #ccc;  border-radius: 5px;}.top-box {  width: 100%;  height: 30px;  background: #f56c6c;  border-radius: 0 0 8px 8px;  color: #fff;  text-align: center;  line-height: 30px;  font-size: 28rpx;  position: absolute;  top: 0px;  left: 0;  animation-duration: 0.5s;  animation-name: slidetop;}.mask {  width: 100%;  height: 100%;  position: fixed;  top: 0;  left: 0;  background: rgba(0, 0, 0, 0.5);}.pop {  position: absolute;  width: 100%;  height: 180px;  background: #42b983;  border-radius: 8px 8px 0 0;  position: absolute;  bottom: 0px;  animation-duration: 0.5s;  animation-name: slidein;}@keyframes slidein {  from {    transform: translateY(70%);  }  to {    transform: translateY(0);  }}@keyframes slidetop {  from {    transform: translateY(-30px);  }  to {    transform: translateY(0px);  }}

// pages/customalertbox/customalertbox.jsPage({  /**   * 页面的初始数据   */  data: {    isBottom: false,    isTop: false,  },  /**   * 生命周期函数--监听页面加载   */  onLoad: function(options) {},  onBottomBox() {    this.setData({      isBottom: true,    });  },  onHideBox() {    this.setData({      isBottom: false,    });  },  onTopBox() {    this.setData({      isTop: true,    });    setTimeout(() => {      this.setData({        isTop: false,      });    }, 2000);  },});

.pop {  /* ...  */  animation-duration: 0.5s;  animation-name: slidein; // 动画的名称}@keyframes slidein {  // 定义动画的名称  from {    transform: translateY(70%); // 平移,垂直方向上  }  to {    transform: translateY(0);  }}.top-box {  /* ... */  animation-duration: 0.5s;  animation-name: slidetop;}@keyframes slidetop {  from {    transform: translateY(-30px);  }  to {    transform: translateY(0px);  }}

// pages/customalertbox/customalertbox.jsPage({  /**   * 页面的初始数据   */  data: {    isBottom: false,    isTop: false,    animationData: {}, // 定义动画对象  },  /**   * 生命周期函数--监听页面加载   */  onLoad: function(options) {},  onBottomBox() {    // 创建动画    var animation = wx.createAnimation({      duration: 2000,      timingFunction: 'ease',    });    this.animation = animation;    // 先在y轴偏移180，然后用step()完成一个动画    animation.translateY(180).step();    this.setData({      animationData: animation.export(),      isBottom: true,    });    // 设置setTimeout来改变y轴偏移量，实现有感觉的滑动,回到初始位置    setTimeout(() => {      animation.translateY(0).step();      this.setData({        animationData: animation.export(),      });    }, 200);  },  // 点击遮罩层隐藏弹框  onHideBox() {    var animation = wx.createAnimation({      duration: 2000,      timingFunction: 'ease',    });    this.animation = animation;    // 先在y轴偏移180，然后用step()完成一个动画    animation.translateY(180).step();    this.setData({      animationData: animation.export(),    });    setTimeout(() => {      animation.translateY(0).step();      this.setData({        animationData: animation.export(),        isBottom: false,      });    }, 200);  },  onTopBox() {    this.setData({      isTop: true,    });    setTimeout(() => {      this.setData({        isTop: false,      });    }, 2000);  },});

<view>  <view>弹出底部弹出框</view>  <view>    <div></div>    <div>底部弹出内容</div>  </view>  <div>通知内容</div></view>