标签：vue center color height width 滑入 rem 0px 弹窗

图片效果

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

 

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

 

标签：vue,center,color,height,width,滑入,rem,0px,弹窗
来源： https://www.cnblogs.com/tlfe/p/12427906.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。