only add click animation when cast is not sync

src/replay/index.ts

@@ -366,9 +366,16 @@ export class Replayer {
         }
         const event = new Event(MouseInteractions[d.type].toLowerCase());
         const target = (mirror.getNode(d.id) as Node) as HTMLElement;
-        if (d.type === MouseInteractions.Blur) {
+        switch (d.type) {
+          case MouseInteractions.Blur:
             target.blur();
-        } else if (d.type === MouseInteractions.Click) {
+            break;
+          case MouseInteractions.Focus:
+            target.focus({
+              preventScroll: true,
+            });
+            break;
+          case MouseInteractions.Click:
             /**
              * Click has no visual impact when replaying and may
              * trigger navigation when apply to an <a> link.
@@ -376,15 +383,14 @@ export class Replayer {
              * animation to the mouse element which indicate user
              * clicked at this moment.
              */
+            if (!isSync) {
               this.mouse.classList.remove('active');
               // tslint:disable-next-line
               void this.mouse.offsetWidth;
               this.mouse.classList.add('active');
-        } else if (d.type === MouseInteractions.Focus) {
+            }
-          target.focus({
+            break;
-            preventScroll: true,
+          default:
-          });
-        } else {
             target.dispatchEvent(event);
         }
         break;