今天写个弹出框动画吧 让页面更加顺畅

之前使用小程序带的animation动画 在iphone手机上挺顺畅 但是在某些安卓手机上就会出现卡顿的情况 所以今天使用css写一个动画 在各个型号手机都可以用 而且非常流畅 不会卡顿 通用的哦

先给小伙伴们上个效果图吧（这个gif费了我老大劲才搞出来）

代码直接上 不废话

html结构

  <div class="float-layout">
    <!--遮罩层-->
    <div class="float-mask"></div>
    <!--内容-->
    <div class="float-body"></div>
  </div>

css动画

.float-layout {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  z-index: 9999;
  visibility: hidden;
  transition: visibility 400ms cubic-bezier(0.36, 0.66, 0.04, 1);

  &.active {
    visibility: visible;
    .float-mask {
      opacity: 1;
    }
    .float-body {
      transform: translate3d(0, 0, 0);
    }
  }

  .float-mask {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    background: rgba(0,0,0,0.4);
    opacity: 0;
    transition: opacity 250ms ease-in;
  }

  .float-body {
    position: absolute;
    left: 0;
    width: 100%;
    bottom: 0;
    background: #fff;
    z-index: 11;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    transform: translate3d(0, 100%, 0);
    transition: transform 320ms cubic-bezier(0.36, 0.66, 0.04, 1);
  }

}

那么写完了该如何使用呢 点击需要弹出的按钮 给class为float-layout的标签添加active这个class 就可以弹出了 大家不妨可以试试 如果实在达不到这样的效果 可以滴滴我哦

有什么问题欢迎随时指出 嘻嘻嘻.