vue实现点击弹出层动画效果

香精煎渔

已于 2022-09-06 09:39:21 修改

阅读量4.7k

点赞数 8

文章标签： vue.js javascript 前端动画

于 2022-07-09 11:43:55 首次发布

本文链接：https://blog.csdn.net/m0_59224033/article/details/125691550

版权

这篇博客展示了如何在Vue中创建一个带有上、下、左、右动画效果的弹出层，并配合遮罩层实现点击关闭功能。通过点击‘打开按钮’，弹出层会从底部以平滑的过渡动画出现，而遮罩层则会在背景中提供视觉隔离。点击遮罩层则会关闭弹出层。代码中详细说明了实现这一功能的数据属性和方法。

摘要由CSDN通过智能技术生成

vue最简单的实现上、下、左、右带动画/遮罩效果的弹出层，话不多说直接上图附代码

<template>
	<div>
		<!-- 按钮 -->
		<div class="openBtn" @click="openFun()">打开按钮</div>
		<!-- 弹出层 -->
		<div :class="['Popup',openBe?'openActive':'']">请在这里填放内容哦</div>
		<!-- 遮罩层 -->
		<div v-show="MaskBe" class="MaskCss" @click="closeFun()"></div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				openBe:false, // 是否打开弹出层
				MaskBe:false,  // 是否开启遮罩层
			};
		},
		methods: {
			// 打开弹出层
			openFun(){
				this.MaskBe=true
				this.openBe=true
			},
			// 点击遮罩则关闭弹层~
			closeFun(){
				this.MaskBe=false
				this.openBe=false
			}
		}
	};
</script>

<style>
	.openBtn{
		width: 100px;
		height: 40px;
		margin: 80px auto;
		text-align: center;
		line-height: 40px;
		border-radius: 4px;
		color: #fff;
		background: skyblue;
	}
	/* 弹出层默认样式 */
	.Popup{
		width: 100%;
		height: 500px;
		background: skyblue;
		position: fixed;
		bottom: -500px;
		z-index: 11000;
		transition: all 0.25s linear; 
	}
	/* 点击按钮是将盒子 bottom 值归零即可实现弹出效果,
	同理，如需更改弹出方向只需将bottom改成top、left、right即可
	(默认样式的方向也需一起更改哦) */
	.openActive{
		bottom: 0px !important;
	}
	/* 遮罩层样式 */
	.MaskCss {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: rgba(0, 0, 0, 0.3);
		z-index: 10000;
	}
</style>