<template>
<div class="x-popup">
  <transition name="x-popup-animate-mask">
    <div v-show="visible" class="x-popup__mask" @click="onClickMask"></div>
  </transition>
  <transition name="x-popup-animate-content">
    <div v-show="visible" class="x-popup__content">
      <slot name="head"></slot>
      <slot></slot>
    </div>
  </transition>
</div>
</template>

<script>
export default {
  props: {
    visible: Boolean
  },
  methods: {
    onClickMask() {
      this.$emit('click-mask')
    }
  }
}
</script>

<style lang="less">
.x-popup {
  &__mask {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    transition: opacity 400ms;
    z-index: 999;
  }
  &__content {
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    background: #fff;
    transition-property: transform;
    transition-duration: 300ms;
    z-index: 1000;
  }

  /* 过渡动效 */
  &-animate-mask-leave-active {
    opacity: 1;
  }
  &-animate-content-enter,
  &-animate-content-leave-active {
    transform: translate3d(0, 100%, 0);
  }
}
</style>
