uniapp （微信小程序） 滑动抽屉 || 侧边栏 || 抽屉

仿colorui 的全屏抽屉效果，因为项目中已经有一套UI 看着colorui的这个效果还不错 就照着效果写了下

页面中我这里是设置的无导航栏 真正写的时候大家怎么配置都可以 我只是觉着全屏的抽屉 视觉方面更强一点
下边儿的代码是基于uniapp / uview , 里边儿有用了几个uview的组件（u-navbar u-icon，使用的时候可以把这两个删掉 ），小伙伴儿如果用的话可以用别的替代一下
自己在浏览器 / 微信小程序上试了试没问题 其他的还没有试 可以试一下奥

.vue

.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