Merge pull request #32 from Laaouatni/line-animation-on-generate-Gcss

fix #31 added line animation on generate
Laaouatni · Aug 21, 2022 · ff36526 · ff36526 · vercel · Aug 21, 2022
2 parents ed178f7 + f4efe41
commit ff36526
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 2 deletions.
diff --git a/gcode/src/API/GcodeApi/Gsimulator/Gcss/CssLine/CssLine.js b/gcode/src/API/GcodeApi/Gsimulator/Gcss/CssLine/CssLine.js
@@ -58,7 +58,9 @@ export default class CssLine {
       top: `${this.smallestPos.y}px`,
       rotate: `${this.lineAngle}deg`,
       backgroundColor: "var(--sky-200)",
-      zIndex: `${GcodeAPI.array.length - this.index}`
+      zIndex: `${GcodeAPI.array.length - this.index}`,
+      key: `${this.index}`,
+      animSpeed: "100ms",
     };
 
     this.stylesKeysArray = Object.keys(this.lineStylesObj);

diff --git a/gcode/src/CSS/Gline/Gline_main/Gline_main.css b/gcode/src/CSS/Gline/Gline_main/Gline_main.css
@@ -4,6 +4,7 @@
 }
 
 .Gline {
+  /*here was var(--line-width)*/
   width: var(--line-width);
   height: var(--line-height);
 }
@@ -14,4 +15,22 @@
   left: var(--line-left);
   transform: rotate(var(--line-rotate));
   z-index: var(--line-zIndex);
-}
+}
+
+.Gline {
+  width: 0;
+  opacity: 0;
+  animation: gline var(--line-animSpeed) ease-in-out forwards;
+  animation-delay: calc(var(--line-animSpeed) * var(--line-key));
+}
+
+@keyframes gline {
+  0% {
+    opacity: 0;
+    width: 0;
+  }
+  100% {
+    width: var(--line-width);
+    opacity: 1;
+  }
+}