初始化项目

src/components/door.vue

@@ -0,0 +1,62 @@
+<template>
+  <div class="door-content animate__animated" :class="style" ref="door-content">
+    <div class="door-img-box" @click="clickHandler">
+      <img :src="require('@/assets/img/door.png')" />
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "door",
+  props: {
+    // status: {
+    //     type: Boolean,
+    //     default: true
+    // }
+  },
+  data() {
+    return {
+      status: true
+    };
+  },
+  computed: {
+    style() {
+      return this.status ? "animate__zoomIn" : "animate__fadeOut";
+    }
+  },
+  methods: {
+    clickHandler() {
+      this.$refs["door-content"].addEventListener(
+        "animationend",
+        this.doorHiddenFun
+      );
+      this.status = false;
+    },
+    doorHiddenFun() {
+      this.$eventBus.$emit("door-hidden");
+      this.$refs["door-content"].removeEventListener(
+        "animationend",
+        this.doorHiddenFun
+      );
+    }
+  }
+};
+</script>
+
+<style scoped lang="scss">
+.door-content {
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+.door-img-box {
+  width: 500px;
+  height: 800px;
+  & > img {
+    width: 100%;
+    height: 100%;
+  }
+}
+</style>