Disable animation when hidden by v-click

Author: whitphx

.vscode/settings.json

@@ -0,0 +1,5 @@
+{
+    "cSpell.words": [
+        "vclick"
+    ]
+}

components/FancyArrow.vue

@@ -114,8 +114,8 @@ const { arrowSvg, textPosition } = useRoughArrow({
             : undefined,
       }
     : undefined,
-  strokeAnimationKeyframeName: "rough-arrow-dash",
-  fillAnimationKeyframeName: "rough-arrow-fill",
+  strokeAnimationClass: "rough-arrow-stroke",
+  fillAnimationClass: "rough-arrow-fill",
 });
 </script>
 
@@ -137,15 +137,15 @@ const { arrowSvg, textPosition } = useRoughArrow({
     </svg>
     <div
       v-if="$slots.default && textPosition"
+      class="rough-arrow-content"
       :style="{
         position: 'absolute',
         left: `${textPosition.x}px`,
         top: `${textPosition.y}px`,
         transform: 'translate(-50%, -50%)',
+        animationDuration: `${props.animationDuration ?? DEFAULT_ANIMATION_DURATION}ms`,
+        animationDelay: `${props.animationDelay ?? 0}ms`,
         visibility: animationEnabled ? 'hidden' : 'visible',
-        animation: animationEnabled
-          ? `rough-arrow-content ${props.animationDuration ?? DEFAULT_ANIMATION_DURATION}ms ease-out ${props.animationDelay ?? 0}ms forwards`
-          : 'none',
       }"
     >
       <slot />
@@ -168,6 +168,7 @@ const { arrowSvg, textPosition } = useRoughArrow({
     visibility: visible;
   }
 }
+
 @keyframes rough-arrow-fill {
   to {
     visibility: visible;
@@ -185,4 +186,23 @@ const { arrowSvg, textPosition } = useRoughArrow({
     visibility: visible;
   }
 }
+
+.rough-arrow-stroke {
+  animation: rough-arrow-dash ease-out forwards;
+}
+.rough-arrow-fill {
+  animation: rough-arrow-fill ease-out forwards;
+}
+.rough-arrow-content {
+  animation: rough-arrow-content ease-out forwards;
+}
+.slidev-vclick-target.slidev-vclick-hidden .rough-arrow-stroke {
+  animation: none;
+}
+.slidev-vclick-target.slidev-vclick-hidden .rough-arrow-fill {
+  animation: none;
+}
+.slidev-vclick-target.slidev-vclick-hidden .rough-arrow-content {
+  animation: none;
+}
 </style>

components/use-rough-arrow.ts

@@ -67,8 +67,8 @@ export function useRoughArrow(props: {
     duration?: number;
     delay?: number;
   };
-  strokeAnimationKeyframeName: string;
-  fillAnimationKeyframeName: string;
+  strokeAnimationClass: string;
+  fillAnimationClass: string;
 }) {
   const {
     point1: point1Ref,
@@ -81,8 +81,8 @@ export function useRoughArrow(props: {
     twoWay,
     centerPositionParam,
     animation,
-    strokeAnimationKeyframeName,
-    fillAnimationKeyframeName,
+    strokeAnimationClass,
+    fillAnimationClass,
   } = props;
   const baseOptions = {
     // We don't support the `bowing` param because it's not so effective for arc.
@@ -364,14 +364,18 @@ export function useRoughArrow(props: {
           const pathDelay =
             currentDelay +
             (index / segment.strokedPaths.length) * segmentDuration;
-          path.style.animation = `${strokeAnimationKeyframeName} ${pathDuration}ms ease-out ${pathDelay}ms forwards`;
+          path.classList.add(strokeAnimationClass);
+          path.style.animationDuration = `${pathDuration}ms`;
+          path.style.animationDelay = `${pathDelay}ms`;
           path.style.strokeDashoffset = `${segment.length}`;
           path.style.strokeDasharray = `${segment.length}`;
           path.style.visibility = "hidden";
         });
         currentDelay += segmentDuration;
         segment.filledPaths.forEach((path) => {
-          path.style.animation = `${fillAnimationKeyframeName} ${segmentDuration}ms ease-out ${currentDelay}ms forwards`;
+          path.classList.add(fillAnimationClass);
+          path.style.animationDuration = `${segmentDuration}ms`;
+          path.style.animationDelay = `${currentDelay}ms`;
           path.style.visibility = "hidden";
         });
       }

slides.md

@@ -716,6 +716,10 @@ If no snap target or absolute position is specified, the arrow will automaticall
     Animated
 </FancyArrow>
 
+<FancyArrow x1="600" y1="100" x2="700" y2="200" animated v-click>
+    Animated with v-click
+</FancyArrow>
+
 <div mt-40 h-70>
 
 ```html {*}{maxHeight: '100%'}
@@ -739,6 +743,10 @@ If no snap target or absolute position is specified, the arrow will automaticall
 <FancyArrow x1="500" y1="100" x2="600" y2="200" animated>
     Animated
 </FancyArrow>
+
+<FancyArrow x1="600" y1="100" x2="700" y2="200" animated v-click>
+    Animated with v-click
+</FancyArrow>
 ```
 
 </div>