fix: v-motion

[KermanX]

This PR includes:

• No longer need preload: false when using v-motion
• Allow to have variants based on current click (currently absolute click only)
• Allow to use v-click and v-motion together. The motion will only start after the element is shown by v-click.
• Fix watchers leak in Slidev directives

Example

<div
  v-motion
  :initial="{ x: 100, y: 0 }"
  :enter="{ x: 400, y: 0, rotate: 0 }"
  :click-1="{ x: 400, y: 100 }"
  :click-2="{ x: 400, y: 200 }"
  :click-1-2="{ rotate: 90 }"
  :leave="{ x: 800, y: 400 }"
  w-30 b b-white>
  clicks {{ $clicks }}
</div>

<div v-click v-motion
  :initial="{ x: -100 }"
  :enter="{ x: 0 }"
  :leave="{ x: 100 }"
>
  ABCD
</div>

The meanings of variants:

• initial: currentPage < thisPage, or v-click hides the current element because $clicks is too small.
• enter: When currentPage === thisPage, and v-click shows the element. Priority: lowest
• click-x: x is a number representing the absolute click num. The variant will take effect if $clicks>=x. Priority: x
• click-x-y: The variant will take effect if x<=$clicks<y. Priority: x
• leave: currentPage > thisPage, or v-click hides the current element because $clicks is too large.

The variants will be combined according to priority.

Preview

Todos

• Inconsistency order of created hook between component and custom directive vuejs/core#10295 is blocking the usage of <div v-click><div v-motion>...</div></div>
• Docs

[netlify]

✅ Deploy Preview for slidev ready!

Name	Link
🔨 Latest commit	022f4bd
🔍 Latest deploy log	https://app.netlify.com/sites/slidev/deploys/660e2000c309aa0008efa378
😎 Deploy Preview	https://deploy-preview-1481--slidev.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[KermanX]

I've just found some designs that may be better. (Too busy these days😭)