Vent-App/pages/home/detail/doorAnimate/doorAnimate.vue

<template>
  <view style="width: 100%; height: 100%">
    <div class="door-container">
      <div style="display: flex" v-show="doorcount == 1">
        <div class="door1" v-show="doorcount == 1" :style="{ height: height }">
          <div
            class="left_door"
            v-bind:class="
              gatestate1 == '1' ||
              gatestate1 == '开启' ||
              gatestate1 == '打开' ||
              gatestate1 == 'true'
                ? 'open_left'
                : 'close_left'
            "
            id="leftdoor1"
          ></div>
          <div
            class="right_door"
            v-bind:class="
              gatestate1 == '1' ||
              gatestate1 == '开启' ||
              gatestate1 == '打开' ||
              gatestate1 == 'true'
                ? 'open_right'
                : 'close_right'
            "
            id="rightdoor1"
          ></div>
        </div>
        <div>
          <video src="videoURL" controls style="width: 100%"></video>
        </div>
      </div>
      <div style="" v-show="doorcount == 2">
        <div class="door2" v-show="doorcount == 2" :style="{ height: height }">
          <div
            class="left_door"
            v-bind:class="
              gatestate1 == '1' ||
              gatestate1 == '开启' ||
              gatestate1 == '打开' ||
              gatestate1 == 'true'
                ? 'open_left'
                : 'close_left'
            "
            id="leftdoor2"
          ></div>
          <div
            class="right_door"
            v-bind:class="
              gatestate1 == '1' ||
              gatestate1 == '开启' ||
              gatestate1 == '打开' ||
              gatestate1 == 'true'
                ? 'open_right'
                : 'close_right'
            "
            id="rightdoor2"
          ></div>
        </div>
        <div class="door2" v-show="doorcount == 2" :style="{ height: height }">
          <div
            class="left_door"
            v-bind:class="
              gatestate2 == '1' ||
              gatestate2 == '开启' ||
              gatestate2 == '打开' ||
              gatestate2 == 'true'
                ? 'open_left'
                : 'close_left'
            "
            id="leftdoor3"
          ></div>
          <div
            class="right_door"
            v-bind:class="
              gatestate2 == '1' ||
              gatestate2 == '开启' ||
              gatestate2 == '打开' ||
              gatestate2 == 'true'
                ? 'open_right'
                : 'close_right'
            "
            id="rightdoor3"
          ></div>
        </div>
        <div>
          <video src="videoURL" controls style="width: 100%"></video>
        </div>
      </div>
      <div style="" v-show="doorcount == 3">
        <div class="door3" v-show="doorcount == 3" :style="{ height: height }">
          <div
            class="left_door"
            v-bind:class="
              gatestate1 == '1' ||
              gatestate1 == '开启' ||
              gatestate1 == '打开' ||
              gatestate1 == 'true'
                ? 'open_left'
                : 'close_left'
            "
            id="leftdoor4"
          ></div>
          <div
            class="right_door"
            v-bind:class="
              gatestate1 == '1' ||
              gatestate1 == '开启' ||
              gatestate1 == '打开' ||
              gatestate1 == 'true'
                ? 'open_right'
                : 'close_right'
            "
            id="rightdoor4"
          ></div>
        </div>
        <div class="door3" v-show="doorcount == 3" :style="{ height: height }">
          <div
            class="left_door"
            v-bind:class="
              gatestate2 == '1' ||
              gatestate2 == '开启' ||
              gatestate2 == '打开' ||
              gatestate2 == 'true'
                ? 'open_left'
                : 'close_left'
            "
            id="leftdoor5"
          ></div>
          <div
            class="right_door"
            v-bind:class="
              gatestate2 == '1' ||
              gatestate2 == '开启' ||
              gatestate2 == '打开' ||
              gatestate2 == 'true'
                ? 'open_right'
                : 'close_right'
            "
            id="rightdoor5"
          ></div>
        </div>
        <div class="door3" v-show="doorcount == 3" :style="{ height: height }">
          <div
            class="left_door"
            v-bind:class="
              gatestate3 == '1' ||
              gatestate3 == '开启' ||
              gatestate3 == '打开' ||
              gatestate3 == 'true'
                ? 'open_left'
                : 'close_left'
            "
            id="leftdoor6"
          ></div>
          <div
            class="right_door"
            v-bind:class="
              gatestate3 == '1' ||
              gatestate3 == '开启' ||
              gatestate3 == '打开' ||
              gatestate3 == 'true'
                ? 'open_right'
                : 'close_right'
            "
            id="rightdoor6"
          ></div>
        </div>
        <div>
          <video src="videoURL" controls style="width: 100%"></video>
        </div>
      </div>
      <div style="" v-show="doorcount == 4">
        <div class="door4" v-show="doorcount == 4" :style="{ height: height }">
          <div
            class="left_door"
            v-bind:class="
              gatestate1 == '1' ||
              gatestate1 == '开启' ||
              gatestate1 == '打开' ||
              gatestate1 == 'true'
                ? 'open_left'
                : 'close_left'
            "
            id="leftdoor7"
          ></div>
          <div
            class="right_door"
            v-bind:class="
              gatestate1 == '1' ||
              gatestate1 == '开启' ||
              gatestate1 == '打开' ||
              gatestate1 == 'true'
                ? 'open_right'
                : 'close_right'
            "
            id="rightdoor7"
          ></div>
        </div>
        <div class="door4" v-show="doorcount == 4" :style="{ height: height }">
          <div
            class="left_door"
            v-bind:class="
              gatestate2 == '1' ||
              gatestate2 == '开启' ||
              gatestate2 == '打开' ||
              gatestate2 == 'true'
                ? 'open_left'
                : 'close_left'
            "
            id="leftdoor8"
          ></div>
          <div
            class="right_door"
            v-bind:class="
              gatestate2 == '1' ||
              gatestate2 == '开启' ||
              gatestate2 == '打开' ||
              gatestate2 == 'true'
                ? 'open_right'
                : 'close_right'
            "
            id="rightdoor8"
          ></div>
        </div>
        <div class="door4" v-show="doorcount == 4" :style="{ height: height }">
          <div
            class="left_door"
            v-bind:class="
              gatestate3 == '1' ||
              gatestate3 == '开启' ||
              gatestate3 == '打开' ||
              gatestate3 == 'true'
                ? 'open_left'
                : 'close_left'
            "
            id="leftdoor9"
          ></div>
          <div
            class="right_door"
            v-bind:class="
              gatestate3 == '1' ||
              gatestate3 == '开启' ||
              gatestate3 == '打开' ||
              gatestate3 == 'true'
                ? 'open_right'
                : 'close_right'
            "
            id="rightdoor9"
          ></div>
        </div>
        <div class="door4" v-show="doorcount == 4" :style="{ height: height }">
          <div
            class="left_door"
            v-bind:class="
              gatestate4 == '1' ||
              gatestate4 == '开启' ||
              gatestate4 == '打开' ||
              gatestate4 == 'true'
                ? 'open_left'
                : 'close_left'
            "
            id="leftdoor10"
          ></div>
          <div
            class="right_door"
            v-bind:class="
              gatestate4 == '1' ||
              gatestate4 == '开启' ||
              gatestate4 == '打开' ||
              gatestate4 == 'true'
                ? 'open_right'
                : 'close_right'
            "
            id="rightdoor10"
          ></div>
        </div>
        <div>
          <video src="videoURL" controls style="width: 100%"></video>
        </div>
      </div>
    </div>
  </view>
</template>

<script>
export default {
  data() {
    return {
      height: "200px",
    };
  },
  props: [
    "gatestate1",
    "gatestate2",
    "gatestate3",
    "gatestate4",
    "doorcount",
    "videoURL",
  ],
  methods: {},
  watch: {
    doorcount(val) {
      if (val == 1) {
        this.height = "180px";
      }
      if (val == 2) {
        this.height = "180px";
      }
      if (val == 3) {
        this.height = "110px";
      }
      if (val == 4) {
        this.height = "180px";
      }
    },
  },
  onLoad(query) {},
};
</script>

<style scoped>
/*门里面*/
div.door1 {
  width: 50%;
  float: left;
  margin-left: 20%;
  background-image: url(../../../../static/door.png);
  background-size: 100% 100%;
  perspective: 800px;
}
div.door2 {
  width: 50%;
  float: left;
  background-image: url(../../../../static/door.png);
  background-size: 100% 100%;
  perspective: 800px;
}
div.door3 {
  width: 33.3%;
  float: left;
  background-image: url(../../../../static/door.png);
  background-size: 100% 100%;
  perspective: 400px;
}
div.door4 {
  width: 50%;
  float: left;
  background-image: url(../../../../static/door.png);
  background-size: 100% 100%;
  perspective: 800px;
}
/*左门/右门*/

div.left_door {
  top: 12%;
  left: 10%;
  width: 40.5%;
  height: 78%;
  box-sizing: border-box;
  float: left;
  z-index: 1;
  position: absolute;
  transition: all 2s ease;
  background-image: url(../../../../static/left.png);
  background-size: 100% 100%;
}
div.right_door {
  top: 12%;
  right: 10%;
  width: 40.2%;
  height: 78%;
  box-sizing: border-box;
  float: left;
  z-index: 1;
  position: absolute;
  transition: all 2s ease;
  background-image: url(../../../../static/left.png);
  background-size: 100% 100%;
}
div.left_door {
  transform-origin: left center;
  border-right: 1px solid rgb(8, 8, 8);
}
div.right_door {
  transform-origin: right center;
  border-left: 1px solid rgb(8, 8, 8);
}
.open_left {
  transform: rotateY(100deg);
}
.open_right {
  transform: rotateY(-100deg);
}
.close_left {
  transform: rotateY(0);
}
.close_right {
  transform: rotateY(0deg);
}
/*使用css变形功能

    div.door:hover div.left_door{
        transform:rotateY(100deg);
    }

    div.door:hover div.right_door{
        transform:rotateY(-100deg);
    }*/
</style>