console 命令行工具 X clear
console
<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<title>遮罩弹出层从下到上滑出</title>

	<style>
		.main-box {
			width: 750px;
			height: 500px;
			background-color: #8c3246;
		}

		.modal-mark {
			position: fixed;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			background-color: #e9cc8e;
			z-index: 12;
		}

		.info-box {
			position: fixed;
			bottom: 0;
			border: 2px solid #2b2b2b;
			margin: 0 auto;
			color: #fff;
			z-index: 999;
		}

		/* 显示或关闭内容时动画 */
		.openBG {
			animation: slideBGtUp 0.5s ease-in both;
			/* animation-fill-mode: both 动画将会执行 forwards 和 backwards 执行的动作。 */
		}

		.closeBG {
			animation: slideBGDown 0.5s ease-in both;
			/* animation-fill-mode: both 动画将会执行 forwards 和 backwards 执行的动作。 */
		}

		.open {
			animation: slideContentUp 0.5s ease-in both;
			/* animation-fill-mode: both 动画将会执行 forwards 和 backwards 执行的动作。 */
		}

		.close {
			animation: slideContentDown 0.5s ease-in both;
			/* animation-fill-mode: both 动画将会执行 forwards 和 backwards 执行的动作。 */
		}

		/* 弹出或关闭动画来动态设置内容高度 */

		@keyframes slideBGtUp {
			from {
				background: transparent;
			}

			to {
				background: rgba(0, 0, 0, 0.1);
			}
		}

		@keyframes slideBGDown {
			from {
				background: rgba(0, 0, 0, 0.1);
			}

			to {
				background: transparent;
			}
		}

		/* 弹出或关闭动画来动态设置内容高度 */

		@keyframes slideContentUp {
			from {
				height: 0;
			}

			to {
				height: 800rpx;
			}
		}

		@keyframes slideContentDown {
			from {
				height: 800rpx;
			}

			to {
				height: 0;
			}
		}
	</style>

</head>

<body>
	<script src="/demos/googlegg.js">

	</script>

	<div class="vueBox">
		<div class="main-box">
			<div @click="joinGroup">立即参与</div>
			<!-- 遮罩 -->
			<div class="modal-mark" v-if="isShow" @click="showMark"></div>
			<!-- 弹出层内容 -->
			<div class="info-box" v-if="showInfo" :class="isShow ? 'openBG' : 'closeBG'">
				<p>选择一个喜欢的去录制</p>
				<div class="type-list">
					<div>测试一</div>
					<div>测试二</div>
					<div>测试三</div>
				</div>
			</div>
		</div>
	</div>
	<script type="text/javascript">
		const vm = new Vue({
        el: ".vueBox",
        data: {
           isShow:false,
           showInfo:false
        },
        created: function () {
           
        },
        methods: {
            joinGroup(){
                this.isShow = !this.isShow;
                this.showInfo = true;
            },
            showMark(){
                this.isShow = false;
                this.showInfo = false;
            }
        }
    });
	</script>

</body>

</html>
本项目引用的自定义外部资源

vue.js