Motion 实例

Motion 实例是在使用 v-motion 或 useMotion 绑定到目标元素时公开的对象。

它由三个属性组成，允许您与元素进行交互。

变体 (Variant)

Variant 是一个字符串引用，您可以修改和监听它。

它表示元素的当前变体名称。

通过修改此变体，您将触发当前变体和您刚刚设置的变体之间的过渡。

<script setup lang="ts">
// Define target.
const target = ref<HTMLElement>()

// Get the variant from target motion instance.
const { variant } = useMotion(target, {
  initial: {
    scale: 1,
    opacity: 0,
  },
  enter: {
    opacity: 1,
    transition: {
      // This will go to `custom` when enter is complete.
      onComplete: () => (variant.value = 'custom'),
    },
  },
  custom: {
    scale: 2,
    transition: {
      type: 'spring',
      damping: 100,
    },
  },
})
</script>
调用 customEvent 以启用自定义变体 ☝️

应用 (Apply)

Apply 是一个函数，允许您动画到变体定义，而无需更改当前变体。

当与事件监听器或对元素 motion 属性的任何临时修改一起使用时，这非常有用。

这也对于编排很有用，因为 apply 返回一个 Promise，您可以等待它并链式应用变体。

Apply 接受 Variant Declaration（变体声明） 或 motion 实例变体中的一个键。

<script setup lang="ts">
// Define target.
const target = ref<HTMLElement>()

// Get the variant from target motion instance.
const { apply } = useMotion(target, {
  initial: {
    scale: 1,
    opacity: 0,
  },
  enter: {
    opacity: 1,
    scale: 1,
  },
})

const customEvent = async () => {
  // Animate to a temporary variant.
  await apply({
    scale: 2,
    transition: {
      type: 'spring',
      damping: 100,
    },
  })

  // Revert back to enter state
  await apply('enter')
}
</script>
调用 customEvent 以 Zboing 元素 ☝️

停止 (Stop)

Stop 是一个函数，允许您停止特定元素的正在进行的动画。

不带参数调用它将停止所有动画。

使用 Motion 属性 键的数组调用它将停止每个指定的键。

使用单个 motion 属性键调用它将停止指定的键。

<script setup lang="ts">
// Define target.
const target = ref<HTMLElement>()

// Get the variant from target motion instance.
const { stop } = useMotion(target, {
  initial: {
    scale: 1,
    opacity: 0,
  },
  visible: {
    opacity: 1,
  },
})

const customEvent = () => {
  // Stop the current animations.
  stop()
}
</script>
调用 customEvent 以停止动画 ☝️
目录