diff --git a/packages/client/builtin/VClick.ts b/packages/client/builtin/VClick.ts
index b38ce53b6d..3c20628735 100644
--- a/packages/client/builtin/VClick.ts
+++ b/packages/client/builtin/VClick.ts
@@ -17,8 +17,20 @@ export default defineComponent({
       type: Boolean,
       default: false,
     },
+    fade: {
+      type: Boolean,
+      default: false,
+    },
   },
   render() {
-    return createVNode(VClicks, { every: 99999, at: this.at, hide: this.hide }, { default: this.$slots.default })
+    return createVNode(
+      VClicks, {
+        every: 99999,
+        at: this.at,
+        hide: this.hide,
+        fade: this.fade,
+      },
+      { default: this.$slots.default },
+    )
   },
 })
diff --git a/packages/client/builtin/VClicks.ts b/packages/client/builtin/VClicks.ts
index e1896009be..a6a6882713 100644
--- a/packages/client/builtin/VClicks.ts
+++ b/packages/client/builtin/VClicks.ts
@@ -21,16 +21,26 @@ export default defineComponent({
       type: Boolean,
       default: false,
     },
+    fade: {
+      type: Boolean,
+      default: false,
+    },
   },
   render() {
     const click = resolveDirective('click')!
     const after = resolveDirective('after')!
 
-    const applyDirective = (node: VNode, directive: Directive, delta: number) => {
-      if (this.at != null)
-        return withDirectives(node, [[directive, +this.at + delta, '', { hide: this.hide }]])
-      return withDirectives(node, [[directive, null, '', { hide: this.hide }]])
-    }
+    const applyDirective = (node: VNode, directive: Directive, delta: number) =>
+      withDirectives(node, [[
+        directive,
+        this.at != null
+          ? +this.at + delta
+          : null, '',
+        {
+          hide: this.hide,
+          fade: this.fade,
+        },
+      ]])
 
     let defaults = this.$slots.default?.()
 
diff --git a/packages/client/modules/directives.ts b/packages/client/modules/directives.ts
index ca2c7c01ff..575515dd0f 100644
--- a/packages/client/modules/directives.ts
+++ b/packages/client/modules/directives.ts
@@ -33,8 +33,8 @@ export default function createDirectives() {
           const clicks = dirInject(dir, injectionClicks)
           const orderMap = dirInject(dir, injectionOrderMap)
 
-          const hide = dir.modifiers.hide
-          const fade = dir.modifiers.fade
+          const hide = dir.modifiers.hide !== false && dir.modifiers.hide != null
+          const fade = dir.modifiers.fade !== false && dir.modifiers.fade != null
 
           const prev = elements?.value?.length || 0