add option for different animation styles

eccenca · Aug 16, 2023 · f858cc4 · f858cc4
1 parent 201249f
commit f858cc4
Show file tree

Hide file tree

Showing 2 changed files with 33 additions and 1 deletion.
diff --git a/src/extensions/react-flow/nodes/NodeContent.tsx b/src/extensions/react-flow/nodes/NodeContent.tsx
@@ -48,6 +48,11 @@ type IntroductionTime = {
      * The time in ms the introdcution animation runs.
      */
     run: number;
+    /**
+     * Animation used for the visual introduction.
+     * `outline` is used as default animation.
+     */
+    animation?: "landing" | "outline";
 };
 
 interface NodeContentData<CONTENT_PROPS = any> {
@@ -473,6 +478,8 @@ export function NodeContent<CONTENT_PROPS = any>({
               "--node-introduction-time": `${
                   typeof introductionTime === "object" ? introductionTime.run : introductionTime
               }ms`,
+              "--node-introduction-animation":
+                  typeof introductionTime === "object" ? introductionTime.animation : undefined,
           } as React.CSSProperties)
         : {};
     const nodeContent = (

diff --git a/src/extensions/react-flow/nodes/_nodes.scss b/src/extensions/react-flow/nodes/_nodes.scss
@@ -391,14 +391,17 @@
 
 .#{$eccgui}-graphviz__node--introduction {
     visibility: hidden;
+    animation-play-state: paused;
 
     & ~ * {
         visibility: hidden;
     }
 }
 
 .#{$eccgui}-graphviz__node--introduction-runs {
-    animation: landing var(--node-introduction-time);
+    animation-name: var(--node-introduction-animation, outline);
+    animation-duration: var(--node-introduction-time);
+    animation-play-state: running;
 
     & ~ * {
         visibility: hidden;
@@ -429,6 +432,28 @@
             transform: scale(1);
         }
     }
+
+    @keyframes outline {
+        0% {
+            outline: solid 0 rgba($eccgui-color-accent, 0);
+            outline-offset: 0;
+        }
+
+        24% {
+            outline: solid $eccgui-size-block-whitespace rgba($eccgui-color-accent, 0.39);
+            outline-offset: 0;
+        }
+
+        76% {
+            outline: solid $eccgui-size-block-whitespace rgba($eccgui-color-accent, 0.39);
+            outline-offset: 0;
+        }
+
+        100% {
+            outline: solid 0 rgba($eccgui-color-accent, 0);
+            outline-offset: 2 * $eccgui-size-block-whitespace;
+        }
+    }
 }
 
 // Node tools