add open and close door transition

index.html

@@ -23,7 +23,7 @@
 
       <div class="floorBox">
         <div class="lift" id="liftBox">
-
+          <div id="lift-inner" class="lift-inner"></div>
         </div>
       </div>
     </div>

js/app.js

@@ -2,6 +2,7 @@ let floorsArrP = document.getElementById("floorsArr");
 let floorArr = [];
 let currentFloor = 4;
 let liftBox = document.getElementById("liftBox");
+let liftInner = document.getElementById("lift-inner");
 let btn0 = document.getElementById("btn0"),
   btn1 = document.getElementById("btn1"),
   btn2 = document.getElementById("btn2"),
@@ -48,64 +49,88 @@ function command(floorNo) {
 
 function move() {
   if (floorArr[0] === 0) {
+    liftInner.style.backgroundPosition = "left bottom";
     liftBox.style.marginTop = "680px";
     liftBox.style.transition = "5s";
     currentFloor = 0;
-    setTimeout(() => {
-      if (floorArr.length !== 0) {
+    if (floorArr.length !== 0) {
+      setTimeout(() => {
         floorArr.splice(0, 1);
         floorsArrP.innerHTML = floorArr;
         btn0.style.backgroundColor = "gray";
         move(floorArr[0]);
-      }
-    }, 5000);
+      }, 6000);
+      setTimeout(() => {
+        liftInner.style.backgroundPosition = "right bottom";
+      }, 5000);
+    }
   } else if (floorArr[0] === 1) {
+    liftInner.style.backgroundPosition = "left bottom";
     liftBox.style.marginTop = "544px";
     liftBox.style.transition = "5s";
     currentFloor = 1;
-    setTimeout(() => {
-      if (floorArr.length !== 0) {
+    if (floorArr.length !== 0) {
+      setTimeout(() => {
         floorArr.splice(0, 1);
         floorsArrP.innerHTML = floorArr;
         btn1.style.backgroundColor = "gray";
+        liftInner.style.backgroundPosition = "right bottom";
         move(floorArr[0]);
-      }
-    }, 5000);
+      }, 6000);
+      setTimeout(() => {
+        liftInner.style.backgroundPosition = "right bottom";
+      }, 5000);
+    }
   } else if (floorArr[0] === 2) {
+    liftInner.style.backgroundPosition = "left bottom";
     liftBox.style.marginTop = "408px";
     liftBox.style.transition = "5s";
     currentFloor = 2;
-    setTimeout(() => {
-      if (floorArr.length !== 0) {
+    if (floorArr.length !== 0) {
+      setTimeout(() => {
         floorArr.splice(0, 1);
         floorsArrP.innerHTML = floorArr;
         btn2.style.backgroundColor = "gray";
+        liftInner.style.backgroundPosition = "right bottom";
         move(floorArr[0]);
-      }
-    }, 5000);
+      }, 6000);
+      setTimeout(() => {
+        liftInner.style.backgroundPosition = "right bottom";
+      }, 5000);
+    }
   } else if (floorArr[0] === 3) {
+    liftInner.style.backgroundPosition = "left bottom";
     liftBox.style.marginTop = "272px";
     liftBox.style.transition = "5s";
     currentFloor = 3;
-    setTimeout(() => {
-      if (floorArr.length !== 0) {
+    if (floorArr.length !== 0) {
+      setTimeout(() => {
         floorArr.splice(0, 1);
         floorsArrP.innerHTML = floorArr;
         btn3.style.backgroundColor = "gray";
+        liftInner.style.backgroundPosition = "right bottom";
         move(floorArr[0]);
-      }
-    }, 5000);
+      }, 6000);
+      setTimeout(() => {
+        liftInner.style.backgroundPosition = "right bottom";
+      }, 5000);
+    }
   } else if (floorArr[0] === 4) {
+    liftInner.style.backgroundPosition = "left bottom";
     liftBox.style.marginTop = "136px";
     liftBox.style.transition = "5s";
     currentFloor = 4;
-    setTimeout(() => {
-      if (floorArr.length !== 0) {
+    if (floorArr.length !== 0) {
+      setTimeout(() => {
         floorArr.splice(0, 1);
         floorsArrP.innerHTML = floorArr;
         btn4.style.backgroundColor = "gray";
+        liftInner.style.backgroundPosition = "right bottom";
         move(floorArr[0]);
-      }
-    }, 5000);
+      }, 6000);
+      setTimeout(() => {
+        liftInner.style.backgroundPosition = "right bottom";
+      }, 5000);
+    }
   }
 }

styles/style.css

@@ -35,7 +35,7 @@ body {
 .floorBox {
   width: 70%;
   background-color: red;
-  height: 100vh;
+  height: 900px;
   display: flex;
   justify-content: center;
 }
@@ -44,5 +44,28 @@ body {
   width: 20%;
   height: 140px;
   background-color: yellow;
-  margin-top: 136px;
+  /* margin-top: 136px; */
+
+  border: 1px solid black;
+  border-radius: 3px;
+  background: linear-gradient(to right, black 50%, white 50%);
+  background-size: 200% 100%;
+  background-position: right bottom;
+  /* transition: all .5s ease-out; */
 }
+
+.lift-inner {
+  width: 100%;
+  height: 140px;
+  background-color: yellow;
+
+  border: 1px solid black;
+  background: linear-gradient(to right, black 50%, white 50%);
+  background-size: 200% 100%;
+  background-position: right bottom;
+  transition: all .5s ease-out;
+}
+
+/* .lift:hover {
+  background-position: left bottom;
+} */