pc 弹窗橡皮筋效果(自己纪录)

<transition name="fadeout">
      <div class="com-model" v-show="showModel">
        <transition name="bounce">
          <div class="com-model-body" v-show="showModel">
            <!-- 头部 -->
            <div class="com-model-header">
              <span>详情</span>
              <i @click="closeDetail"></i>
            </div>
            <!-- 主题内容 -->
            <div class="com-model-main">
              <p class="title">咨询详情页</p>
              <!-- 表格里面的内容 -->
              <table class="table" style="max-width: 900px;min-width: 300px;">
                <colgroup>
                  <col width="160" />
                  <col width />
                </colgroup>
              </table>
            </div>
          </div>
        </transition>
      </div>
    </transition>

　　

<script>

import userDetailModel from "@/mixins/userDetailModel";
export default {

  mixins: [userDetailModel],


};
</script>

　　

userDetailModel.js

export default {
  data() {
    return {
      showModel: false,
    };
  },
  watch: {
    showModel(val) {
      if (val) {
        document.body.style.overflowY = "hidden";
        document.body.style.paddingRight = "18px";
      } else {
        document.body.style.overflowY = "auto";
        document.body.style.paddingRight = "0";
      }
    },
  },
  methods: {
    // 点击取消预约
    lookDetailHander() {},
    // 展示详情页的弹窗
    showDetail() {
      this.showModel = true;
    },
    // 关闭弹窗
    closeDetail() {
      this.showModel = false;
    },
  },
};

　　

.com-model {
  z-index: 19991026;
  background-color: rgba(0, 0, 0, 0.3);
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  position: fixed;
  .com-model-body {
    width: 674px;
    height: 80%;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    background-color: #ffffff;
    font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB",
      "Microsoft YaHei UI", "Microsoft YaHei", 微软雅黑, Arial, sans-serif;
    display: flex;
    padding-top: 42px;
    .com-model-header {
      position: absolute;
      top: 0;
      padding: 0 20px;
      height: 42px;
      display: flex;
      width: 100%;
      justify-content: space-between;
      align-items: center;
      border-bottom: 1px solid #eee;
      background-color: #f8f8f8;
      border-radius: 2px 2px 0 0;
      span {
        font-size: 14px;
        color: #333;
      }
      i {
        cursor: pointer;
        position: relative;
        width: 16px;
        height: 16px;
        margin-left: 10px;
        font-size: 12px;
        background: url(http://218.77.183.206:81/wssp/static/js/plugins/layui/css/modules/layer/default/icon.png)
          no-repeat 1px -40px;
      }
    }
    .com-model-main {
      flex: 1;
      overflow-y: auto;
      margin-top: 28px;
      padding: 0 16px 40px;
      .title {
        margin-bottom: 21px;
        font-size: 25px;
        font-weight: bold;
        letter-spacing: 1px;
        color: #1a2b40;
        line-height: 1.5;
        font-weight: bold;
      }
      .table {
        border-collapse: collapse;
        border-spacing: 0;
        th,
        td {
          font-size: 14px;
          padding: 10px;
          border: 1px solid #d9e0e8;
          color: #1a2b40;
          line-height: 1.5;
        }
        th {
          background: #f1f4f7;
          font-weight: bold;
        }
      }
    }
  }
}

// 详情页面弹窗动画
.bounce-enter-active {
  animation: bounce-in 0.5s;
}
.bounce-leave-active {
  animation: bounce-in 0.5s reverse;
}
@keyframes bounce-in {
  0% {
    width: 0;
    height: 0;
    opacity: 0;
  }
  50% {
    width: 700px;
    height: 90%;
  }
}

.fadeout-enter {
  opacity: 0;
}
.fadeout-leave {
  opacity: 1;
}
.fadeout-enter-active {
  transition: opacity 1s;
}
.fadeout-leave-active {
  opacity: 0;
  // display: none;
  transition: opacity 0.5s;
}

@media screen and (min-width: 1365px) {
  .com-model {
    .com-model-body {
      width: 950px;
      height: 640px;
    }
  }
  @keyframes bounce-in {
    0% {
      width: 0;
      height: 0;
      opacity: 0;
    }
    50% {
      width: 1000px;
      height: 680px;
    }
  }
}