收起展开

src/views/overview.vue

@@ -1,21 +1,23 @@
 <template>
   <div class="overview">
     <!-- <div class="innerContainer leftPane">驾驶舱</div> -->
-    <div class="innerContainer leftPane">
+    <div class="innerContainer leftPane" :class="{ 'leftPaneAnimationDown': isleftPaneAnimationDown,'leftPaneAnimationUp':isleftPaneAnimationUp }">
       <QYGH />
       <ZRZY />
       <KCZY />
+      <div class="leftPanePackUp" @click="switchPack_down">
+      </div>
     </div>
-    <div class="leftPanePackUp" @click="switchPack">
 
-    </div>
-    <div class="innerContainer rightPane" :class="{ 'rightPaneAnimation': iSRightPaneAnimation }">
+    <div class="innerContainer rightPane"
+      :class="{ 'rightPaneAnimationUp': iSRightPaneAnimationUp, 'rightPaneAnimationDown': isRightPaneAnimationDown, }">
       <DXGL />
       <GDBH />
       <JCJG />
+      <div class="rightPanePackUp" @click="switchPack_up">
+      </div>
     </div>
-    <div class="rightPanePackUp"  @click="switchPack">
-    </div>
+
   </div>
 </template>
 
@@ -39,15 +41,53 @@ export default {
   },
   data() {
     return {
-      iSRightPaneAnimation: false
+      iSRightPaneAnimationUp: false,
+      isRightPaneAnimationDown: false,
+      isleftPaneAnimationDown: false,
+      isleftPaneAnimationUp:false
     };
   },
   created() { },
   methods: {
+    switchPack_down() {
+      // 右侧动画控制
+      this.iSRightPaneAnimationUp = !this.iSRightPaneAnimationUp;
+      this.isRightPaneAnimationDown = false;
+      // 动画完成之后，修改位置
+      setTimeout(() => {
+        let dom = document.getElementsByClassName('rightPane')[0];
+        dom.style.right = '-360px';
+      }, 600);
+
+      // 左侧控制
+      this.isleftPaneAnimationDown = !this.isleftPaneAnimationDown;
+      this.isleftPaneAnimationUp = false;
+
+      setTimeout(() => {
+        let leftPane = document.getElementsByClassName('leftPane')[0];
+        leftPane.style.left = '-360px';
+      }, 600);
+    },
+    switchPack_up() {
+      // 右侧动画控制
+      this.isRightPaneAnimationDown = !this.isRightPaneAnimationDown;
+      this.iSRightPaneAnimationUp = false;
+      // 动画完成之后，修改位置
+      setTimeout(() => {
+        let rightPane = document.getElementsByClassName('rightPane')[0];
+        rightPane.style.right = '10px';
+      }, 600);
+
+      // 左侧控制
+      this.isleftPaneAnimationDown = false;
+      this.isleftPaneAnimationUp = !this.isleftPaneAnimationUp;
+      setTimeout(() => {
+        let leftPane = document.getElementsByClassName('leftPane')[0];
+        leftPane.style.left = '10px';
+      }, 600);
+    },
+
 
-    switchPack() {
-      this.iSRightPaneAnimation = true;
-    }
   },
 };
 </script>
@@ -80,6 +120,11 @@ export default {
 
 }
 
+.rightPane {
+  right: 10px;
+}
+
+// 右侧面板收起动画
 @keyframes rightPaneAnimation-packUp {
 
   from {
@@ -93,12 +138,73 @@ export default {
 }
 
 
-.rightPane {
-  right: 10px;
+
+.rightPaneAnimationUp {
+  animation: rightPaneAnimation-packUp 0.5s linear 0.5s forwards;
+  animation-iteration-count: 1;
+}
+
+// 右侧面板放开动画
+@keyframes rightPaneAnimation-packDown {
+  from {
+    right: -360px;
+  }
+
+  to {
+    right: 10px;
+
+  }
+
+
 }
 
-.rightPaneAnimation {
-  animation: rightPaneAnimation-packUp 1s linear 0.5s forwards;
+
+
+.rightPaneAnimationDown {
+  animation: rightPaneAnimation-packDown 0.5s linear 0.5s forwards;
+  animation-iteration-count: 1;
+}
+
+// 左侧面板收起
+@keyframes leftPaneAnimation-Down {
+  from {
+    left: 10px;
+  }
+
+  to {
+    left: -360px;
+
+  }
+
+
+}
+
+
+
+.leftPaneAnimationDown {
+  animation: leftPaneAnimation-Down 0.5s linear 0.5s forwards;
+  animation-iteration-count: 1;
+}
+
+// 左侧面板打开
+@keyframes leftPaneAnimation-up {
+  from {
+    left: -360px;
+
+  }
+
+  to {
+    left: 10px;
+
+  }
+
+
+}
+
+
+
+.leftPaneAnimationUp {
+  animation: leftPaneAnimation-up 0.5s linear 0.5s forwards;
   animation-iteration-count: 1;
 }
 
@@ -109,7 +215,7 @@ export default {
   background-image: url("/static/images/homepage/packDown.png");
   background-size: 100% 100%;
   position: absolute;
-  left: 19%;
+  left: 103%;
   z-index: 11111;
   top: 50%;
 }
@@ -118,10 +224,12 @@ export default {
   width: 25px;
   height: 25PX;
   min-height: 50px;
-  background-image: url("/static/images/homepage/packUp.png");
+  // background-image: url("/static/images/homepage/packUp.png");
+  background-image: url("/static/images/homepage/packDown.png");
+
   background-size: 100% 100%;
   position: absolute;
-  right: 19%;
+  left: -10%;
   z-index: 11111;
   top: 50%;
 }