<template>
<div>
<p @click="toggle" class="h4000">展示弹窗</p>
<div class="box">
<transition name="opacity">
<div class="mask" @touchmove.prevent v-if="show" @click="toggle"></div>
</transition>
<transition name='bounce' :duration='50000'>
<div class="content" v-if="show">
<div v-for="(item, i) in list" :key="i">内容区域</div>
</div>
</transition>
</div>
</div>
</template>
<style>
.h4000{
height: 4000px;
}
.mask{
position: fixed;
height: 100%;
background: rgba(0, 0, 0, 0.6);
width: 100%;
top: 0;
left: 0;
z-index: 10
}
.content{
background-color: #ffffff;
z-
Vue居中弹窗加vue动画
最新推荐文章于 2024-06-25 10:38:29 发布
本文详细介绍了如何在Vue项目中创建一个居中显示的弹窗组件,并结合Vue的过渡动画库实现平滑的弹窗打开和关闭动画。内容涵盖了组件设计、样式定位以及Vue的transition组件使用方法。
摘要由CSDN通过智能技术生成