指令用法

vueuse/motion 允许你直接从组件的模板中编写动画，而无需将目标元素包裹在任何包装组件中。

无论你是在 HTML 或 SVG 元素上，还是在任何 Vue 组件上使用该指令，它都应该以相同的方式工作。

你的第一个 v-motion

v-motion 是来自此包的指令名称。

指令用法允许你直接从组件的模板中编写你的变体。

v-motion 可以根据需要在任何 HTML 或 SVG 组件中以及在任何组件上使用多次。

一旦放置在元素上，v-motion 将允许你将你的变体编写为该元素的 props。

支持的变体 props 如下

  • initial: 元素在挂载前将配备的属性。
  • enter: 元素在挂载后将配备的属性。
  • visible: 元素每次在视图中时将配备的属性。一旦它移出视图，将应用 initial 属性。
  • visible-once: 元素在首次进入视图时将配备的属性。
  • hovered: 当指针进入其区域时，元素将配备的属性。
  • focused: 当元素获得焦点时，元素将配备的属性。
  • tapped: 当点击（鼠标）或轻击（触摸设备）时，元素将配备的属性。

你还可以使用 :variants prop 将你的变体作为对象传递。

:variants prop 将与所有其他原生变体属性组合，允许你仅从该对象定义你的自定义变体。

其余的变体属性可以在 变体 页面上找到。

速记 props

为了方便起见，我们支持以下速记 props，它们允许你快速配置过渡属性

  • delay
  • duration

如果你指定了 visible、visible-once 或 enter 变体，这些速记属性将应用于它们中的每一个。

否则，它们将被应用于 initial 变体。

<template>
  <div
    v-motion
    :initial="{ opacity: 0, y: 100 }"
    :enter="{ opacity: 1, y: 0, scale: 1 }"
    :variants="{ custom: { scale: 2 } }"
    :hovered="{ scale: 1.2 }"
    :delay="200"
    :duration="1200"
  />
</template>
指令太棒了 😍

访问 v-motion 实例

当从模板定义时，目标元素可能未分配给 ref。

你可以使用 useMotions 访问 motion 控制。

如果你想访问 v-motion，你将必须为元素指定一个名称作为 v-motion 值。

然后你可以直接调用 useMotions，并使用其名称作为键来访问该 v-motion 控制。

<template>
  <div
    v-motion="'custom'"
    :initial="{ opacity: 0, y: 100 }"
    :enter="{ opacity: 1, y: 0 }"
    :variants="{ custom: { scale: 2 } }"
  />
</template>

<script>
import { useMotions } from '@vueuse/motion'

// Get custom controls
const { custom } = useMotions()

const customEvent = () => {
  // Change the current variant of `custom` element
  custom.variant.value = 'custom'
}
</script>

在上面的示例中，自定义对象将是 Motion 实例 的一个实例。

自定义指令

你可以直接从插件配置中添加将以 v-motion 为前缀的自定义指令。

import { MotionPlugin } from '@vueuse/motion'

const app = createApp(App)

app.use(MotionPlugin, {
  directives: {
    'pop-bottom': {
      initial: {
        scale: 0,
        opacity: 0,
        y: 100,
      },
      visible: {
        scale: 1,
        opacity: 1,
        y: 0,
      },
    },
  },
})

app.mount('#app')

使用上面的代码，你将在应用程序的任何元素或组件上全局访问 v-motion-pop-bottom。

目录