vue 弹窗滑入滑出动画

图片效果

红色部门效果是向下滑出，和向上滑入

 

html部分

<div class="viewhistory-buttom animate_active" :style="editBtnShow==1?'bottom:0;':''"> //editBtnShow默认不能为1（就是不显示），为1就滑出来，
  <div class="empty">全部清空</div>|
  <div class="delete">删除</div>
</div>

css部门

  .animate_active{

      transition: all .6s ease-in-out; //这是滑入划出的动画

    }

.viewhistory-buttom{
        position: fixed;
        bottom: -50%; //默认弹窗在底部-50%的地方
        width: 7.5rem;
        height: .98rem;
        background-color: #ffffff;
        box-shadow: 0px 0px 0.1rem 0px 
            rgba(40, 40, 40, 0.31);
        border: solid 0.01rem #e9e9e9;
        display: flex;
        align-items: center;
        font-size: .32rem;
        color: #666666;
        .empty{
            width: 3.7rem;
            height: 100%;
            line-height: 0.98rem;
            text-align: center;
        }
        .delete{
            width: 3.7rem;
            height: 100%;
            color: #25c2ba;
            text-align: center;
            line-height: 0.98rem;
        }
    }