useMotion

useMotion 是此包的核心组合式函数。

此组合式函数导入所有其他组合式函数并公开一个 motion 实例。

useMotionProperties 用于使元素样式属性具有响应性。

useMotionTransitions 用于管理过渡调度和执行。

useMotionVariants 用于处理变体和变体选择。

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

useMotionFeatures 用于注册生命周期钩子绑定、可见性和事件监听器。

Parameters

target

Target 必须是一个元素 (SVG / HTML)，或对元素的引用。

如果目标引用被更新，当前变体将被应用于新元素。

variants

Variants 必须是一个对象或对象引用。

键是变体名称，值是 变体声明。

options

Options 是一个对象，支持 4 个参数

  1. syncVariants (boolean): 是否在更新时同步变体。
  2. lifeCycleHooks (boolean): 是否遵循生命周期钩子。
  3. visibilityHooks (boolean): 是否应用可见性钩子。
  4. eventListeners (boolean): 是否注册事件监听器。

您不应该被迫使用这些选项，因为如果您不声明相关的变体，它们无论如何都不会被注册。

Exposed

target

Target 是对您作为参数传递的元素的引用。

variant

Variant 是一个字符串引用，来自 useMotionVariants。

variants

Variants 是对您作为参数传递的变体的引用。

state

State 是对应用于您元素的当前变体的计算引用。

...controls

来自 Motion Controls 公开函数的展开对象。

Example

const target = ref<HTMLElement>()

const variants = ref<MotionVariants>({
  initial: {
    opacity: 0,
  },
  enter: {
    opacity: 1,
  },
})

const motionInstance = useMotion(target, variants)
Table of Contents