原生实现底部弹窗效果 h5 小程序

 

<template><div class="home"><div class="btn" @click="showPopup='show'">弹出底部蒙层</div><div class="popup " catchtouchmove="true" :class="showPopup" ><div class="mask"></div><div class="layer attr-content"><div class="close" @click="closePopup">关闭</div></div></div></div>
</template>

<script>
export default{data(){return{showPopup:'none'}},methods:{closePopup(){this.showPopup = 'hide';setTimeout(() => {this.showPopup = 'none';}, 250);}}
}
</script>

 

<style lang="scss" scoped>
.btn{width:200px;height:50px;text-align: center;line-height: 50px;font-size:16px;position: fixed;left:50%;top:40%;transform: translateX(-50%);cursor: pointer;
}.popup {position: fixed;left: 0;top: 0;right: 0;bottom: 0;z-index: 999;overflow: hidden;&.show {display: block; }   .close{width:100px;height:50px;font-size: 16px;line-height: 50px;text-align: center;}&.hide {.mask {animation: hidePopup 0.2s linear both;}.layer {animation: hideLayer 0.2s linear both;}}&.none {display: none;}.mask {position: fixed;top: 0;width: 100%;height: 100%;z-index: 1;background-color: rgba(0, 0, 0, 0.3);animation: showPopup 0.2s linear both;}.layer {display: flex;width: 100%; flex-direction: column;min-height: 40vh;max-height: 1014rpx;position: fixed;z-index: 99;bottom: 0;border-radius: 10upx 10upx 0 0;background-color: #fff;animation: showLayer 0.2s linear both;}
}
@keyframes showPopup {0% {opacity: 0;}100% {opacity: 1;}
}@keyframes hidePopup {0% {opacity: 1;}100% {opacity: 0;}
}@keyframes showLayer {0% {transform: translateY(120%);}100% {transform: translateY(0%);}
}@keyframes hideLayer {0% {transform: translateY(0);} 100% {transform: translateY(120%);     }
}
</style>