仿colorui 的全屏抽屉效果，因为项目中已经有一套UI 看着colorui的这个效果还不错 就照着效果写了下
页面中我这里是设置的无导航栏 真正写的时候大家怎么配置都可以 我只是觉着全屏的抽屉 视觉方面更强一点
下边儿的代码是基于uniapp / uview , 里边儿有用了几个uview的组件（u-navbar u-icon，使用的时候可以把这两个删掉 ），小伙伴儿如果用的话可以用别的替代一下
自己在浏览器 / 微信小程序上试了试没问题 其他的还没有试 可以试一下奥
.vue
<template>
<view class="platDetaList-warp">
<view class="plat-item">
<view class="plat-item-menu" :class="drawerIsShow?'menu-animation':'menu-animation-return'">
<u-navbar id="navbardom" :is-fixed="false" :is-back="false" :border-bottom="false" :background="{ background: '#ffffff' }"></u-navbar>
</view>
<view class="plat-item-list" :class="drawerIsShow?'drawer-animation':'drawer-animation-return'">
<u-navbar id="navbardom" :is-fixed="!navIsFixed?true:false" :is-back="false" :border-bottom="false" :background="{ background: '#ffffff' }">
<view class="slot-wrap list-nav">
<u-icon name="arrow-left" size="40" style="margin: 0 0 0 10upx;" @click="returnPage"></u-icon>
<text>板块列表</text>
</view>
</u-navbar>
<button @click="openDrawer">打开抽屉</button>
</view>
<view class="plat-item-mask" :class="drawerIsShow?'mask-animation':'mask-animation-return'" @click="returnList">
<view class="return-icon">
<u-icon name="arrow-rightward" size="30"></u-icon>
</view>
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
drawerIsShow : false ,
navIsFixed : false
};
},
components:{
},
onLoad(){
},
computed: {
},
methods: {
openDrawer(){
this.drawerIsShow = true
this.navIsFixed = true
},
returnList(){
this.drawerIsShow = false
setTimeout(()=>{ //400毫秒后让导航固定 防止导航瞬间移动
this.navIsFixed = false
},400)
}
}
};
</script>
<style lang="scss" >
page{
background-color: #f1f1f1;
height: 100%;
}
</style>
<style lang="scss" scoped>
@import "./platDetaList.scss";
</style>
.scss
.platDetaList-warp{
// background-color: #f1f1f1;
height: 100%;
width: 100%;
overflow: hidden;
.plat-item{
position: relative;
width: 100%;
height: 100%;
&-menu{
position: absolute;
left: -100%;
top: 0;
width: 78%;
background-color: #ffffff;
height: 100%;
}
.menu-animation{
animation:menuMove 0.4s ease-in-out alternate forwards;
}
@keyframes menuMove{
0%{
left:-100%;
top: 100upx;
}
100%{
left: 0;
top: 0;
}
}
.menu-animation-return{
animation:menuMoveReturn 0.2s ease-in-out alternate forwards;
}
@keyframes menuMoveReturn{
0%{
left: 0;
top: 0;
}
100%{
left:-100%;
top: 100upx;
}
}
&-list{
position: absolute;
right: 0;
top: 0;
width: 100%;
height: 100%;
background-color: #ffffff;
overflow: auto;
button{
width: 50%;
}
}
.drawer-animation{
animation:drawerMove 0.3s ease-in-out alternate forwards;
}
@keyframes drawerMove{
0% {
right:0;
top: 0;
}
100% {
right: -83%;
top: 60upx;
}
}
.drawer-animation-return{
animation:drawerMoveReturn 0.4s ease-in-out alternate forwards;
}
@keyframes drawerMoveReturn{
0% {
right: -83%;
top: 60upx;
}
100% {
right:0;
top: 0;
}
}
&-mask{
position: absolute;
right: -100%;
top: 0;
height: 100%;
width: 17%;
background-image: linear-gradient(to right, rgba(0,0,0,0) , rgba(0,0,0,0.4));
.return-icon{
position: absolute;
bottom: 100upx;
left: 30%;
border: 4upx solid #ffffff;
border-radius: 50%;
width: 70upx;
height: 70upx;
display: flex;
justify-content: center;
align-items: center;
color: #ffffff;
}
}
.mask-animation{
animation:maskMove 0.3s ease-in-out alternate forwards;
}
@keyframes maskMove{
0% {
right: -100%;
opacity: 0;
}
100% {
right: 0;
opacity: 1;
}
}
.mask-animation-return{
animation:maskMoveReturn 0.1s ease-in-out alternate forwards;
}
@keyframes maskMoveReturn{
0% {
right: 0;
opacity: 1;
}
100% {
right: -100%;
opacity: 0;
}
}
}
.list-nav{
display: flex;
align-items: center;
text{
padding: 0 0 0 14upx;
font-size: 32upx;
}
}
}
gif 图可能需要加载个5 6 秒
目前代码显示效果（不知道为啥录屏为mp4 然后转为gif看着有丝丝卡顿 可能是转gif的时候有问题）：
huadong-qian.gif
按照我要添加的内容添加完后：
huadong-hou.gif
