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

<template>
	<view style="width:100%;height:100%">
			<div class="door-container">
			  <div style="" 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>
			  <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>
			  <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>
			  <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>
		</div>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				height:"200px"
			}
		},
        props:['gatestate1','gatestate2','gatestate3','gatestate4','doorcount'],
		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: 60%;
  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>