向上弹起弹窗 vue组件

<Rule :showRule="showRule" />

<template>
  <div class="xn-container">
    <div class="mask" v-show="showRule" @click="close()"></div>
    <div class="popup-content" :class="{'show': showRule}">
        <p>通过css3的transition实现</p>
        <p>我是弹窗内容</p>
        <p>可以点击遮罩关闭我可以点击遮罩关闭我可以点击遮罩关闭我可以点击遮罩关闭我可以点击遮罩关闭我可以点击遮罩关闭我可以点击遮罩关闭我可以点击遮罩关闭我可以点击遮罩关闭我可以点击遮罩关闭我可以点击遮罩关闭我可以点击遮罩关闭我可以点击遮罩关闭我可以点击遮罩关闭我可以点击遮罩关闭我可以点击遮罩关闭我可以点击遮罩关闭我可以点击遮罩关闭我可以点击遮罩关闭我可以点击遮罩关闭我可以点击遮罩关闭我可以点击遮罩关闭我可以点击遮罩关闭我可以点击遮罩关闭我可以点击遮罩关闭我可以点击遮罩关闭我可以点击遮罩关闭我可以点击遮罩关闭我可以点击遮罩关闭我可以点击遮罩关闭我可以点击遮罩关闭我可以点击遮罩关闭我可以点击遮罩关闭我可以点击遮罩关闭我可以点击遮罩关闭我可以点击遮罩关闭我可以点击遮罩关闭我可以点击遮罩关闭我可以点击遮罩关闭我可以点击遮罩关闭我</p>
    </div>
  </div>
</template>
<script>
export default {
  props: ['showRule'],
  data() {
    return {}
  },
  methods: {
    close() {
      this.$parent.showRule = false
    }
  }
}
</script>
<style lang="less" scoped>
.xn-container {
    height: 100%;
}
.mask {
  position: fixed;
  width: 100%;
  left: 0;
  top: 0;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.4);
  transition: all 0.6s;
}
.popup-content {
  position: absolute;
  height: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  overflow-y: scroll;
  background-color: white;
  -webkit-transition: all 0.6s;
  transition: all 0.6s;
  &.show {
      height: 400px;
  }
  p {
      line-height: 30px;
      text-align: center;
  }
}
</style>