vue页面代码

<Screen :show='show' @close="close"></Screen>
//还有一个点击事件,将show=true
close(e) {
	this.show = e
},

子组件代码

<template>
	<view class="container" v-show="hideModal">
		<view class="mask" @touchmove.stop.prevent @click="close()"></view>
		<view class="content bottom-pos" :animation="animationData" @touchmove.stop.prevent>
			
		</view>
	</view>
</template>

<script>
	import StoreMix from "@/plugins/mixin/store";
	export default{
		name:'writeOff',
		mixins: [StoreMix],
		props:{
			show:{
				type: Boolean,
				required: true
			},
		},
		data() {
			return {
				hideModal: false, //模态框的状态  true-隐藏  false-显示
				animationData: {}, //
				val: 0,
			}
		},
		watch:{
			show(val) {
				if(val){
					this.showModal()
				}
			}
		},
		methods:{
			
			// 显示遮罩层
			showModal: function() {
				var that = this;
				that.hideModal = true
				var animation = uni.createAnimation({
					duration: 600, //动画的持续时间 默认400ms   数值越大，动画越慢   数值越小，动画越快
					timingFunction: 'ease', //动画的效果 默认值是linear
				})
				this.animation = animation
				setTimeout(function() {
					that.fadeIn(); //调用显示动画
				}, 200)
			},
			// 隐藏遮罩层
			close: function() {
				var that = this;
				var animation = wx.createAnimation({
					duration: 800, //动画的持续时间 默认400ms   数值越大，动画越慢   数值越小，动画越快
					timingFunction: 'ease', //动画的效果 默认值是linear
				})
				this.animation = animation
				that.fadeDown(); //调用隐藏动画   
				setTimeout(function() {
					that.hideModal = false
					that.$emit('close',!that.show)
				}, 720) //先执行下滑动画，再隐藏模块
			
			},
			//动画集
			fadeIn: function() {
				this.animation.translateY(0).step()
				this.animationData = this.animation.export() //动画实例的export方法导出动画数据传递给组件的animation属性
			},
			fadeDown: function() {
				this.animation.translateY(335).step() //移动的距离
				this.animationData = this.animation.export()
			},
		}
	}
</script>

<style lang="scss" scoped>
	.container{
		.mask{
			width: 100%;
			height: 100%;
			background: rgba(0, 0, 0, 0.7);
			z-index: 20;
			position: fixed;
			top: 0;
			left: 0;
		}
		.content{
			width: 100%;
			height: 670rpx;
			position: fixed;
			bottom: 0;
			left: 0;
			background-color: #F8F8F8;
			z-index: 21;
			border-radius: 20rpx 20rpx 0 0;
			overflow: hidden;
		}
		/*动画前初始位置*/
		.bottom-pos {
			-webkit-transform: translateY(100%);
			transform: translateY(100%);
		}
	}
</style>