uni picker 遮罩从下滑出

<template>
	<view class="content">
		<button @click="open">open</button>
		<view class="mask" v-if="toogle" @click="open"></view>
		<view class="picker" :class="{'uni-picker-toggle':toogle}"></view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				title: 'Hello',
				toogle:false,
			}
		},
		onLoad() {

		},
		methods: {
			open(){
				this.toogle=!this.toogle;
			},
		}
	}
</script>

<style>
	.content {
		text-align: center;
		height: 400upx;
	}
	.mask{
		  position: fixed;
		  left: 0;
		  top: 0;
		  width: 100%;
		  height: 100%;
		  z-index: 999;
		  background: rgba(0, 0, 0, 0.5);
	}
	.picker{
		    position: fixed;
			left: 0;
			bottom: 0;
			z-index: 999;
			width: 100%;
			height: 400upx;
			background-color: #fff;
			transform: translateY(100%);
			backface-visibility: hidden;
			visibility: hidden;
			transition-duration: .3s,.3s;
	}
	.uni-picker-toggle{
		    visibility: visible;
			transform: translate(0);
	}
</style>