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;
        }
    }