vue 弹窗滑入滑出动画

图片效果

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

 

上一篇:css border实现三角形


下一篇:python做一个写诗歌的网页