<template>
  <div class="drawer">
    <button @click="clickBtn">点击</button>

    <div class="background" v-if="open" @click.self="closeDrop">
      <div class="drop" :class="{ active: isActive, close: isClose }">drop</div>
    </div>
  </div>
</template>

<script>
export default {
  name: "HelloWorld",
  props: {},
  data() {
    return {
      open: false,
      isActive: false,
      isClose: false
    };
  },
  methods: {
    clickBtn() {
      this.open = true;
      this.isActive = true;
      this.isClose = false;
    },
    closeDrop() {
      this.isClose = true;
      setTimeout(() => {
        this.open = false;
      }, 200);
    }
  }
};
</script>


<style scoped lang="scss">
.background {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba($color: #000000, $alpha: 0.5);
  .drop {
    width: 0px;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    background: #fff;
  }
  // 开
  .active {
    animation: opendoor 0.3s normal forwards;
  }
  @keyframes opendoor {
    from {
      width: 0;
    }
    to {
      width: 45%;
    }
  }
  // 关
  .close {
    animation: close 0.3s normal forwards;
  }
  @keyframes close {
    0% {
      width: 45%;
    }
    100% {
      width: 0;
      opacity: 0;
    }
  }
}
</style>