代码展示:
<template>
<div class="sildebar">
<div class="home" @click="hideMenu">
侧边栏
</div>
<div class="menu" v-show="isShows" @click="hideMenu"></div>
<transition name="slide-fade">
<div class="lk-sss" v-show="isShow">
<ul class="sList">
<li>列表1</li>
<li>列表1</li>
<li>列表1</li>
<li>列表1</li>
<li>列表1</li>
<li>列表1</li>
</ul>
</div>
</transition>
</div>
</template>
逻辑部分:
data () {
return {
isShow: false,
isShows: false
}
},
methods: {
hideMenu() {
if(this.isShow){
this.isShow = false
this.isShows = false
}else{
this.isShow = true
this.isShows = true
}
}
}
css样式:
.home{
cursor: pointer;
width:80px;
height:50px;
padding: 0;
line-height: 50px;
text-align: center;
border: 1px solid #ddd;
border-radius:5px;
}
.lk-sss{
color: #fff;
position: fixed;
width: 286px;
height: 100%;
top: 0;
left: 0;
bottom: 0;
z-index: 11;
overflow-y: auto;
background: #000
}
.sList{
padding-top: 100px;
}
.slide-fade-enter-active {
transition: all .3s ease;
}
.slide-fade-leave-active {
transition: all .3s cubic-bezier(1.0, 0.5, 0.8, 1.0);
}
.slide-fade-leave-to,.slide-fade-enter{
transform: translateX(-286px);
opacity: 0;
}
.menu {
position: fixed;
top: 0;
left: 0;
bottom: 0;
right: 0;
opacity: 1;
z-index: 10;
background: rgba(0,0,0,0.5);
}