通用actionsheet css样式代码

在项目中可以写成组件使用，很简单，这里重在记录样式。
记录一下以后就不重复写了。有需要用的可以拿走不谢。
效果图 其中包含有底部弹出css3动画：

div部分

<div class="bottom-action-sheet-mask" v-if="resultShow"></div>
      <div class="bottom-action-sheet" :class="{'bottom-action-sheet-animation': resultShow}" v-if="resultShow">
        <div class="first-button first-button-gray">完成评估提交量表</div>
        <div class="second-button" @click="toResult">提交</div>
        <div @click="testingInfo.question_list[testingInfo.question_list.length-1].selected=false">返回</div>
      </div>

css部分

  .bottom-action-sheet{
    position: fixed;
    bottom: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    z-index: 21;
    background: #FFF;
    width: 100%;
    border-radius: 10px 10px 0px 0px;
  }

  .bottom-action-sheet div{
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    font-size: 16px;
    line-height: 20px;
    text-align: center;
    color: #141515;
    width: 100%;
    height: 56px;
  }

  .bottom-action-sheet div.first-button-gray {
    font-size: 12px;
    color: #717373;
  }

  .second-button {
    border-top: 1px solid #F2F2F3;
    border-bottom: 8px solid #F2F2F3;
    color: #FF6868;
  }

  .bottom-action-sheet-mask {
    position: fixed;
    z-index: 21;
    background: rgba(0, 0, 0, 0.6);
    left: 0;
    top: 0;
    bottom: -200px;
    right: 0;
  }

  .bottom-action-sheet-animation {
    animation: bottomApear 0.5s;
  }
  @keyframes bottomApear{
    0%{bottom: -200px;}
    100%{bottom: 0;}
  }