update

Author: whitphx

components/FancyArrow.vue

@@ -84,6 +84,14 @@ const point2: Ref<AbsolutePosition | undefined> = useEndpointResolution(
   },
 );
 
+const animationEnabled = computed(() => {
+  return (
+    props.animated ||
+    props.animationDuration != null ||
+    props.animationDelay != null
+  );
+});
+
 const { arrowSvg, textPosition } = useRoughArrow({
   point1,
   point2,
@@ -94,19 +102,18 @@ const { arrowSvg, textPosition } = useRoughArrow({
   headSize: props.headSize ? Number(props.headSize) : null,
   roughness: props.roughness ? Number(props.roughness) : undefined,
   seed: props.seed ? Number(props.seed) : undefined,
-  animation:
-    props.animated || props.animationDuration || props.animationDelay
-      ? {
-          duration:
-            props.animationDuration != null
-              ? Number(props.animationDuration)
-              : undefined,
-          delay:
-            props.animationDelay != null
-              ? Number(props.animationDelay)
-              : undefined,
-        }
-      : undefined,
+  animation: animationEnabled.value
+    ? {
+        duration:
+          props.animationDuration != null
+            ? Number(props.animationDuration)
+            : undefined,
+        delay:
+          props.animationDelay != null
+            ? Number(props.animationDelay)
+            : undefined,
+      }
+    : undefined,
   strokeAnimationKeyframeName: "rough-arrow-dash",
   fillAnimationKeyframeName: "rough-arrow-fill",
 });
@@ -135,14 +142,10 @@ const { arrowSvg, textPosition } = useRoughArrow({
         left: `${textPosition.x}px`,
         top: `${textPosition.y}px`,
         transform: 'translate(-50%, -50%)',
-        visibility:
-          props.animated || props.animationDuration || props.animationDelay
-            ? 'hidden'
-            : 'visible',
-        animation:
-          props.animated || props.animationDuration || props.animationDelay
-            ? `rough-arrow-content ${props.animationDuration ?? DEFAULT_ANIMATION_DURATION}ms ease-out ${props.animationDelay ?? 0}ms forwards`
-            : 'none',
+        visibility: animationEnabled ? 'hidden' : 'visible',
+        animation: animationEnabled
+          ? `rough-arrow-content ${props.animationDuration ?? DEFAULT_ANIMATION_DURATION}ms ease-out ${props.animationDelay ?? 0}ms forwards`
+          : 'none',
       }"
     >
       <slot />

slides.md

@@ -712,9 +712,13 @@ If no snap target or absolute position is specified, the arrow will automaticall
     <img src="https://sli.dev/logo.svg" w-10 m-auto/>
 </FancyArrow>
 
+<FancyArrow x1="500" y1="100" x2="600" y2="200" animated>
+    Animated
+</FancyArrow>
+
 <div mt-40>
 
-```html
+```html {*}{maxHeight: '300px'}
 <FancyArrow x1="100" y1="100" x2="200" y2="200" >
     Hello
 </FancyArrow>
@@ -731,6 +735,10 @@ If no snap target or absolute position is specified, the arrow will automaticall
     <span text-nowrap>Slidev logo</span>
     <img src="https://sli.dev/logo.svg" w-10 m-auto/>
 </FancyArrow>
+
+<FancyArrow x1="500" y1="100" x2="600" y2="200" animated>
+    Animated
+</FancyArrow>
 ```
 
 </div>