用uniapp写一个领取优惠券的弹出层动画

实现方式

这个弹出层动画中，我们使用了一个 coupon-box 元素作为优惠券的容器。这个元素默认是隐藏的，只有当用户点击领取优惠券的按钮时才会从底部弹出。弹出时，我们通过 CSS 动画实现了一个从底部上推的效果。

同时，我们还使用了一个遮罩层 mask 来遮挡页面，使用户无法进行其他操作。当弹出层关闭时，遮罩层也会自动关闭。

代码示例

<template>
  <view class="container">
    <view class="coupon-box" :class="{'show': showCoupon}">
      <view class="coupon-header">恭喜您获得优惠券</view>
      <view class="coupon-amount">{{ couponAmount }}</view>
      <view class="coupon-desc">{{ couponDesc }}</view>
      <button class="coupon-btn" @click="receiveCoupon">立即领取</button>
    </view>
    <view class="mask" :class="{'show': showCoupon}" @click="hideCoupon"></view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      showCoupon: false,
      couponAmount: '50元',
      couponDesc: '满100元可用',
    };
  },
  methods: {
    showCouponBox() {
      this.showCoupon = true;
      setTimeout(() => {
        this.$refs.couponBox.style.transform = 'translateY(0)';
        this.$refs.couponBox.style.opacity = 1;
      }, 100);
    },
    hideCoupon() {
      this.$refs.couponBox.style.transform = 'translateY(-100%)';
      this.$refs.couponBox.style.opacity = 0;
      setTimeout(() => {
        this.showCoupon = false;
      }, 300);
    },
    receiveCoupon() {
      // TODO: 领取优惠券的业务逻辑
    },
  },
};
</script>

<style>
.container {
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.coupon-box {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 300rpx;
  background-color: #fff;
  border-radius: 20rpx 20rpx 0 0;
  box-shadow: 0 0 20rpx rgba(0, 0, 0, 0.1);
  transform: translateY(100%);
  opacity: 0;
  transition: all 0.3s;
}

.coupon-header {
  font-size: 36rpx;
  font-weight: bold;
  color: #333;
  margin: 40rpx 0 20rpx 0;
  text-align: center;
}

.coupon-amount {
  font-size: 80rpx;
  font-weight: bold;
  color: #ff0000;
  text-align: center;
}

.coupon-desc {
  font-size: 28rpx;
  color: #666;
  margin: 30rpx 0;
  text-align: center;
}

.coupon-btn {
  margin: 20rpx auto 0 auto;
  width: 500rpx;
  height: 80rpx;
  border: none;
  border-radius: 40rpx;
  background-color: #ff0000;
  color: #fff;
  font-size: 36rpx;
  display: block;
  text-align: center;
  line-height: 80rpx;
}

.mask {
  position: fixed;
  background-color: rgba(0, 0, 0, 0.5);
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 999;
  opacity: 0;
  transition: all 0.3s;
}

.show {
  opacity: 1;
}

</style>

以上代码仅供参考，具体实现细节和样式可以根据需求自行调整。

源码获取方法：

需要完整源码的朋友，希望你能点赞+收藏+评论，然后私信我即可~

会员学习群：【一对一答疑】

如果教程中有不懂的地方，可添加学习会员小助手咨询（微信：mifankeji77）