文档

示例

获取 Motion+

文档

示例

获取 Motion+

文档

示例

获取 Motion+

文档

文档

JS

React

Vue

示例

开始使用

动画

组件

Motion 值

Hooks

集成

JS

React

Vue

示例

开始使用

动画

组件

Motion 值

Hooks

集成

Vue

useAnimate

useAnimate

useAnimate 提供了一种使用 animate函数的方法，该函数的作用域限定于组件内的元素。

这允许你使用手动动画控制、时间线、作用域限定于组件的选择器以及自动清理。

它提供了一个 scope ref，以及一个 animate 函数，其中每个 DOM 选择器都作用域限定于此 ref。

<script setup>
import { useAnimate } from 'motion-v'

const [scope, animate] = useAnimate()

onMounted(() => {
  // This "li" selector will only select children
  // of the element that receives `scope`
  animate('li', { opacity: 1 })
})
</script>

<template>
  <ul ref="scope">
    <slot />
  </ul>
</template>

此外，当调用 useAnimate 的组件被移除时，所有通过其 animate 函数启动的动画都将自动清理。

用法

从 Motion 导入

import { useAnimate } from "motion-v"

useAnimate 返回两个参数：一个 scope ref 和一个 animate函数.

<script setup>
import { useAnimate } from 'motion-v'

const [scope, animate] = useAnimate()
</script>

这个 scope ref 必须传递给一个普通的 HTML/SVG 元素或一个 motion 组件。

<script setup>
import { useAnimate } from 'motion-v'

const [scope, animate] = useAnimate()
</script>

<template>
  <ul ref="scope">
    <slot />
  </ul>
</template>

这个作用域限定的 animate 函数现在可以在 effects 和事件处理程序中使用，以动画元素。

我们可以直接使用作用域限定的元素

animate(scope.current, { opacity: 1 }, { duration: 1 })

或者通过传递一个选择器

animate("li", { backgroundColor: "#000" }, { ease: "linear" })

这个选择器是 "li"，但我们不是选择页面上所有的 li 元素，而只是作用域限定元素子元素中的那些。

滚动触发的动画

当作用域滚动到视图中时，可以通过将 useAnimate 与 useInView 结合使用来触发动画。

<script setup>
import { useAnimate, useInView } from 'motion-v'

const [scope, animate] = useAnimate()
const isInView = useInView(scope)

watch(isInView, (inView) => {
  if (inView) {
    animate(scope.value, { opacity: 1 })
  }
})
</script>

<template>
  <ul ref="scope">
    <li />
    <li />
    <li />
  </ul>
</template>

useAnimate 提供了一种使用 animate函数的方法，该函数的作用域限定于组件内的元素。

这允许你使用手动动画控制、时间线、作用域限定于组件的选择器以及自动清理。

它提供了一个 scope ref，以及一个 animate 函数，其中每个 DOM 选择器都作用域限定于此 ref。

<script setup>
import { useAnimate } from 'motion-v'

const [scope, animate] = useAnimate()

onMounted(() => {
  // This "li" selector will only select children
  // of the element that receives `scope`
  animate('li', { opacity: 1 })
})
</script>

<template>
  <ul ref="scope">
    <slot />
  </ul>
</template>

此外，当调用 useAnimate 的组件被移除时，所有通过其 animate 函数启动的动画都将自动清理。

用法

从 Motion 导入

import { useAnimate } from "motion-v"

useAnimate 返回两个参数：一个 scope ref 和一个 animate函数.

<script setup>
import { useAnimate } from 'motion-v'

const [scope, animate] = useAnimate()
</script>

这个 scope ref 必须传递给一个普通的 HTML/SVG 元素或一个 motion 组件。

<script setup>
import { useAnimate } from 'motion-v'

const [scope, animate] = useAnimate()
</script>

<template>
  <ul ref="scope">
    <slot />
  </ul>
</template>

这个作用域限定的 animate 函数现在可以在 effects 和事件处理程序中使用，以动画元素。

我们可以直接使用作用域限定的元素

animate(scope.current, { opacity: 1 }, { duration: 1 })

或者通过传递一个选择器

animate("li", { backgroundColor: "#000" }, { ease: "linear" })

这个选择器是 "li"，但我们不是选择页面上所有的 li 元素，而只是作用域限定元素子元素中的那些。

滚动触发的动画

当作用域滚动到视图中时，可以通过将 useAnimate 与 useInView 结合使用来触发动画。

<script setup>
import { useAnimate, useInView } from 'motion-v'

const [scope, animate] = useAnimate()
const isInView = useInView(scope)

watch(isInView, (inView) => {
  if (inView) {
    animate(scope.value, { opacity: 1 })
  }
})
</script>

<template>
  <ul ref="scope">
    <li />
    <li />
    <li />
  </ul>
</template>

useAnimate 提供了一种使用 animate函数的方法，该函数的作用域限定于组件内的元素。

这允许你使用手动动画控制、时间线、作用域限定于组件的选择器以及自动清理。

它提供了一个 scope ref，以及一个 animate 函数，其中每个 DOM 选择器都作用域限定于此 ref。

<script setup>
import { useAnimate } from 'motion-v'

const [scope, animate] = useAnimate()

onMounted(() => {
  // This "li" selector will only select children
  // of the element that receives `scope`
  animate('li', { opacity: 1 })
})
</script>

<template>
  <ul ref="scope">
    <slot />
  </ul>
</template>

此外，当调用 useAnimate 的组件被移除时，所有通过其 animate 函数启动的动画都将自动清理。

用法

从 Motion 导入

import { useAnimate } from "motion-v"

useAnimate 返回两个参数：一个 scope ref 和一个 animate函数.

<script setup>
import { useAnimate } from 'motion-v'

const [scope, animate] = useAnimate()
</script>

这个 scope ref 必须传递给一个普通的 HTML/SVG 元素或一个 motion 组件。

<script setup>
import { useAnimate } from 'motion-v'

const [scope, animate] = useAnimate()
</script>

<template>
  <ul ref="scope">
    <slot />
  </ul>
</template>

这个作用域限定的 animate 函数现在可以在 effects 和事件处理程序中使用，以动画元素。

我们可以直接使用作用域限定的元素

animate(scope.current, { opacity: 1 }, { duration: 1 })

或者通过传递一个选择器

animate("li", { backgroundColor: "#000" }, { ease: "linear" })

这个选择器是 "li"，但我们不是选择页面上所有的 li 元素，而只是作用域限定元素子元素中的那些。

滚动触发的动画

当作用域滚动到视图中时，可以通过将 useAnimate 与 useInView 结合使用来触发动画。

<script setup>
import { useAnimate, useInView } from 'motion-v'

const [scope, animate] = useAnimate()
const isInView = useInView(scope)

watch(isInView, (inView) => {
  if (inView) {
    animate(scope.value, { opacity: 1 })
  }
})
</script>

<template>
  <ul ref="scope">
    <li />
    <li />
    <li />
  </ul>
</template>

useVelocity

useAnimationFrame

保持关注

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

©2025 Motion Division 有限公司
网站

关于

博客

文档

示例

Motion+

赞助

社交

Discord

GitHub

X/Twitter

Bluesky

保持关注

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

©2025 Motion Division 有限公司
网站

关于

博客

文档

示例

Motion+

赞助

社交

Discord

GitHub

X/Twitter

Bluesky