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

<template>
  <view style="width: 100%; height: 100%">
            <div class="checkwind-echarts-div" v-if="type == 'windrect_rect'">
                <div class="checkwind">
                  <div class="sub_line" v-bind:class="state == '0'? 'top_state' : state == '1' ?  'middle_state' : state == '2' ?  'bottom_state' : 'bottom_state' " id="subline">
                  </div>
                </div>
                <span>{{title}}</span>
              </div>
		<div class="checkwind-echarts-div" v-if="type == 'windrect_ds'">
		      <div class="checkwind_ds">
		        <div
		          class="sub_line"
		          v-bind:class="
		            state == '0'
		              ? 'top_state'
		              : state == '1'
		              ? 'middle_state'
		              : state == '2'
		              ? 'bottom_state'
		              : 'bottom_state'
		          "
		          id="subline"
		        ></div>
		        <div
		          class="sub_line1"
		          v-bind:class="
		            state == '0'
		              ? 'top_state1'
		              : state == '1'
		              ? 'middle_state1'
		              : state == '2'
		              ? 'bottom_state1'
		              : 'bottom_state1'
		          "
		          id="subline1"
		        ></div>
		        <div
		          class="sub_line2"
		          v-bind:class="
		            state == '0'
		              ? 'top_state2'
		              : state == '1'
		              ? 'middle_state2'
		              : state == '2'
		              ? 'bottom_state2'
		              : 'bottom_state2'
		          "
		          id="subline2"
		        ></div>
		      </div>
		      <span>{{ title }}</span>
		    </div>
  </view>
</template>

<script>
export default {
  data() {
    return {
      height: "200px",
    };
  },
  props: [
    "state",
    "title",
    "height",
    "type",
  ],
  methods: {},
  onLoad(query) {},
};
</script>

<style scoped>

    /*门里面*/
    div.checkwind{
        width: 160px;
        height: 160px;
        background-image: url(../../../../static/wind.png);
        background-size:100% 100%;
        perspective: 800px;
    }
    /*左门/右门*/

    div.checkwind .sub_line{
        margin-top: 10px;
        margin-left: 10px;
        width:142px;
        height:30px;
        box-sizing:border-box;
        float:left;
        z-index: 1;
        transition:all 2s ease;
        background-image: url(../../../../static/line.png) ;
        background-size:100% 100%;
    }
    div.checkwind .sub_line{
        transform-origin:left center;
        border-right:1px solid rgb(8, 8, 8);
    }
    .checkwind .top_state{
      transform: translateY(5px);
    }
    .checkwind .middle_state{
      transform: translateY(45px);
    }
    .checkwind .bottom_state{
      transform: translateY(90px);
    }
</style>

<style scoped>
/*门里面*/
div.checkwind_ds {
  width: 160px;
  height: 160px;
  background-image: url(../../../../static/wind.png);
  background-size: 100% 100%;
  perspective: 800px;
}
/*左门/右门*/

div.checkwind_ds .sub_line {
  margin-top: 10px;
  margin-left: 8px;
  width: 180px;
  height: 25px;
  box-sizing: border-box;
  float: left;
  z-index: 1;
  transition: all 2s ease;
  background-image: url(../../../../static/line_ds.png);
  background-size: 100% 100%;
}
div.checkwind_ds .sub_line1 {
  position: absolute;
  top: 20px;
  left: 12px;
  width: 30px;
  height: 35px;
  box-sizing: border-box;
  z-index: 4;
  transition: all 2s ease;
  background-image: url(../../../../static/wind_ds1.png);
  background-size: 100% 100%;
}
div.checkwind_ds .sub_line2 {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 33px;
  height: 38px;
  box-sizing: border-box;
  z-index: 4;
  transition: all 2s ease;
  background-image: url(../../../../static/wind_ds2.png);
  background-size: 100% 100%;
}
div.checkwind_ds .sub_line {
  transform-origin: left center;
  border-right: 1px solid rgb(8, 8, 8);
}
.checkwind_ds .top_state {
  transform: translateY(15px) rotateY(-40deg);
  /* transform: rotateY(-20deg) */
}
.checkwind_ds .middle_state {
  transform: translateY(45px) rotateY(0deg) scaleX(0.83);
}
.checkwind_ds .bottom_state {
  transform: translateY(80px);
}
.checkwind_ds .top_state1 {
  transform: translateY(0px);
  /* transform: rotateY(-20deg) */
}
.checkwind_ds .middle_state1 {
  transform: translateY(30px);
}
.checkwind_ds .bottom_state1 {
  transform: translateY(65px);
}
.checkwind_ds .top_state2 {
  transform: translateY(0px);
  /* transform: rotateY(-20deg) */
}
.checkwind_ds .middle_state2 {
  transform: translateY(35px);
}
.checkwind_ds .bottom_state2 {
  transform: translateY(72px);
}
</style>