useMotionControls

useMotionControls 用于从 motion 属性和 motion 过渡创建 motion 控制。

Motion 实例 成员是帮助您轻松与元素 motion 属性交互的助手。

参数

motionProperties

一个 Motion Properties 实例。

variants

一个 Variants 定义。

motionTransitions

一个 Motion Transitions 实例。

公开

apply(variant)

Apply 函数将接受一个 Variant 定义 并将其应用于元素，而不会更改当前的 variant 值。

它也接受来自 variants 参数的 variant 键，该键将被应用而不会更改当前的 variant 名称。

Apply 是一个 promise，一旦您传递的 variant 产生的所有过渡完成，它将被解析。

set(variant)

Set 函数将接受一个 Variant 定义 并将其应用于元素，而不会更改当前的 variant 值。

它也接受来自 variants 参数的 variant 键，该键将被应用而不会更改当前的 variant 名称。

它与 apply(variant) 的不同之处在于，它将在目标上设置值，而不会运行任何过渡。

stopTransitions()

Stop Transitions 函数将停止当前 useMotionTransitions 实例上的所有正在进行的过渡。

示例

const target = ref<HTMLElement>()

const { motionProperties } = useMotionProperties(target)

const { apply, stopTransitions } = useMotionControls(motionProperties, {
  initial: {
    y: 100,
    opacity: 0,
  },
  custom: {
    y: 0,
    opacity: 1,
  },
})

apply({
  opacity: 1,
  scale: 2,
})

setTimeout(() => {
  stopTransitions()

  console.log('Stopped after 200ms!')
}, 200)

const applyCustom = async () => {
  await apply('custom')

  console.log('Custom applied!')
}
目录