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

fix #31 added line animation on generate

Author: Laaouatni

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);

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;
+  }
+}