文档

示例

获取 Motion+

文档

示例

获取 Motion+

文档

示例

获取 Motion+

文档

文档

JS

React

Vue

示例

开始

动画

组件

Motion 值

钩子

集成

JS

React

Vue

示例

开始

动画

组件

Motion 值

钩子

集成

Vue

useMotionValueEvent

useMotionValueEvent

useMotionValueEvent 在 Vue 组件的整个生命周期中管理 motion value 事件处理程序。

<script setup>
  import { useMotionValue, useMotionValueEvent } from "motion-v"
  const x = useMotionValue(0)
  
  useMotionValueEvent(x, "animationStart", () => {
    console.log("animation started on x")
  })
  
  useMotionValueEvent(x, "change", (latest) => {
    console.log("x changed to", latest)
  })
</script>

<template>
   <motion.div :style="{ x }" />
</template>

当组件卸载时，事件处理程序将被安全地清理。

用法

从 Motion 导入

import { useMotionValueEvent } from "motion-v"

要向 motion value 添加事件侦听器，请提供 value、事件名称和回调

const color = useMotionValue("#00f")

useMotionValueEvent(color, "change", (latest) => {
  console.log(latest)
})

可用事件有

  • change

  • animationStart

  • animationComplete

  • animationCancel

"change" 事件会提供 motion value 的最新值。

高级

useMotionValueEvent 是 motion value 的 on 的辅助函数方法。 使用 on，您可以随时开始监听事件，例如在事件处理程序中。但请记住在组件卸载时也取消订阅。

watch([x, y],(n,o,onCleanUp) => {
  const doSomething = () => {}
  
  const unsubX = x.on("change", doSomething)
  const unsubY = y.on("change", doSomething)
  
  onCleanUp(() => {
    unsubX()
    unsubY()
  })
},{
  immediate:true
})

useMotionValueEvent 在 Vue 组件的整个生命周期中管理 motion value 事件处理程序。

<script setup>
  import { useMotionValue, useMotionValueEvent } from "motion-v"
  const x = useMotionValue(0)
  
  useMotionValueEvent(x, "animationStart", () => {
    console.log("animation started on x")
  })
  
  useMotionValueEvent(x, "change", (latest) => {
    console.log("x changed to", latest)
  })
</script>

<template>
   <motion.div :style="{ x }" />
</template>

当组件卸载时，事件处理程序将被安全地清理。

用法

从 Motion 导入

import { useMotionValueEvent } from "motion-v"

要向 motion value 添加事件侦听器，请提供 value、事件名称和回调

const color = useMotionValue("#00f")

useMotionValueEvent(color, "change", (latest) => {
  console.log(latest)
})

可用事件有

  • change

  • animationStart

  • animationComplete

  • animationCancel

"change" 事件会提供 motion value 的最新值。

高级

useMotionValueEvent 是 motion value 的 on 的辅助函数方法。 使用 on，您可以随时开始监听事件，例如在事件处理程序中。但请记住在组件卸载时也取消订阅。

watch([x, y],(n,o,onCleanUp) => {
  const doSomething = () => {}
  
  const unsubX = x.on("change", doSomething)
  const unsubY = y.on("change", doSomething)
  
  onCleanUp(() => {
    unsubX()
    unsubY()
  })
},{
  immediate:true
})

useMotionValueEvent 在 Vue 组件的整个生命周期中管理 motion value 事件处理程序。

<script setup>
  import { useMotionValue, useMotionValueEvent } from "motion-v"
  const x = useMotionValue(0)
  
  useMotionValueEvent(x, "animationStart", () => {
    console.log("animation started on x")
  })
  
  useMotionValueEvent(x, "change", (latest) => {
    console.log("x changed to", latest)
  })
</script>

<template>
   <motion.div :style="{ x }" />
</template>

当组件卸载时，事件处理程序将被安全地清理。

用法

从 Motion 导入

import { useMotionValueEvent } from "motion-v"

要向 motion value 添加事件侦听器，请提供 value、事件名称和回调

const color = useMotionValue("#00f")

useMotionValueEvent(color, "change", (latest) => {
  console.log(latest)
})

可用事件有

  • change

  • animationStart

  • animationComplete

  • animationCancel

"change" 事件会提供 motion value 的最新值。

高级

useMotionValueEvent 是 motion value 的 on 的辅助函数方法。 使用 on，您可以随时开始监听事件，例如在事件处理程序中。但请记住在组件卸载时也取消订阅。

watch([x, y],(n,o,onCleanUp) => {
  const doSomething = () => {}
  
  const unsubX = x.on("change", doSomething)
  const unsubY = y.on("change", doSomething)
  
  onCleanUp(() => {
    unsubX()
    unsubY()
  })
},{
  immediate:true
})

useMotionValueEvent

示例

进阶

Motion+是一次性付费，终身会员资格。

除了高级 Motion 功能、抢先体验内容和私有 Discord 社区外，您还将解锁对 90 多个高级示例源代码的访问权限，这些示例将此页面上的 API 提升到一个新的水平。

加载中...

获取 Motion+

获取 Motion+

获取 Motion+

useMotionTemplate

useSpring

保持关注

订阅以获取最新消息和更新。

©2025 Motion Division Ltd.
网站

关于

博客

文档

示例

Motion+

赞助

社交

Discord

GitHub

X/Twitter

Bluesky

保持关注

订阅以获取最新消息和更新。

©2025 Motion Division Ltd.
网站

关于

博客

文档

示例

Motion+

赞助

社交

Discord

GitHub

X/Twitter

Bluesky