实现点击开屏效果，类似于上下方向的开关门，

开屏动画效果：
进入页面后 openShow组件会完全遮挡内容区域，当点击中间的图片后，实现顶部图片向上收起，底部图片向下收起的效果。

<template>
	<view class="index">
		<view class="content">
			
		view>
		
		
		<view class="openShow" v-if="openShow">
			<view class="image top_img" :class="{ 'expanded1': openImgShow }">view>
			<image src="../../static/img/3.png" mode="" class="open" @click="open" v-if="!openImgShow">image>
			<view class="image bom_img" :class="{ 'expanded2': openImgShow }">view>
		view>
	view>
template>

<script>
	export default {
		data() {
			return {
				openShow:true,
				openImgShow: false,
			}
		},
		onLoad() {
			uni.hideTabBar(); //隐藏tabbar
		},
		methods: {
			open(){
				this.openImgShow = !this.openImgShow;
				setTimeout(()=>{
					uni.showTabBar(); //显示tabbar
					this.openShow = false
				},1000)
			}
		}
	}
script>
<style scoped lang="scss">
	// 开屏动画
	.openShow {
		position: fixed;
		left: 0;
		top: 0;
		width: 750rpx;
		height: 100vh;
		z-index: 99;
		overflow: hidden;
		.open{
			position: absolute;
			left: 50%;
			top: 50%;
			z-index: 99;
			width: 400rpx;
			height: 400rpx;
			margin-left: -200rpx;
			margin-top: -200rpx;
		}
		.image {
			position: absolute;
			width: 710rpx;
			height: 50%;
			transition: all 1s;
			left: 20rpx;
		}
		
		.top_img {
			width: 710rpx;
			top: 0;
			background-image: url('../../static/img/1.png');
			background-size: cover;
		}
		
		.bom_img {
			width: 710rpx;
			bottom: 0;
			background-image: url('../../static/img/2.png');
			background-size:cover;
		}
		
		.expanded1 {
			transform: translateY(-100%);
		}
		
		.expanded2 {
			transform: translateY(100%);
		}
	}
style>