学习总结——通过css设置上下滑出，左右滑出动画效果

【背景】小程序需求中涉及了一个actionsheet半屏菜单，和一个滚动时候需要隐藏一半的icon，所以要求添加从底部滑出，从右侧滑出的动画效果。需要从底部滑出的半屏菜单是带黑色遮罩的模态弹窗页面，需要从右侧滑出的是悬浮的icon，我们使用了uniapp的框架，所以模板部分写法和vue类似

【关键字】css的animation，我是文档的搬运工CSS animation 属性

【底部滑出】

模板部分——一般的模态窗会直接设置显示隐藏，但是需要底部滑出的动画效果，内容区域不能直接通过控制dom显示隐藏来设置，会显得比较生硬，所以通过设置过渡动画来搞

<div
    class="content"
    :class="{
        'open': visible,
        'close': !visible
    }"
>
你的内容
</div>

样式部分

我这边设置的匀速 

    /* 显示或关闭动画*/
    .open {
        animation: slideContentUp 0.3s linear both;
    }

    .close {
        animation: slideContentDown 0.3s linear both;
    }

    /* 动态设置高度 */
    @keyframes slideContentUp {
        from {
            height: 0;
        }

        to {
            height: 80vh;
        }
    }

    @keyframes slideContentDown {
        from {
            height: 80vh;
        }

        to {
            height: 0;
        }
    }

然后底部遮罩层会有问题，所以为了适配动画，给模态层添加了监听到内容区域visible隐藏后，延迟动画0.3s后隐藏，这样动画回收效果完成后，遮罩再去掉就好多了~

【右侧滑出】

和从底部滑出类似，不过height改为设置宽度，同样不需要设置v-if这种显示隐藏，通过样式控制

     /* 显示或关闭动画*/
    .open {
        animation: left 0.3s ease-in both;
    }

    .close {
        animation: right 0.3s ease-in both;
    }
    @keyframes left {
        from {
            width: 50px; /*最小的宽度，隐藏就写0，我这边图标静止需要一个宽度*/
        }

        to {
            width: 250px;/*最大展开的宽度*/
        }
    }

    @keyframes right {
        from {
            width: 250px;
        }

        to {
            width: 50px;
        }
    }

特此记录