文档

示例

获取 Motion+

文档

示例

获取 Motion+

文档

示例

获取 Motion+

文档

文档

JS

React

Vue

示例

开始使用

教程

动画

组件

Motion 值

Hooks

集成

指南

JS

React

Vue

示例

开始使用

教程

动画

组件

Motion 值

Hooks

集成

指南

React

useAnimate

useAnimate

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

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

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

function Component() {
  const [scope, animate] = useAnimate()

  useEffect(() => {
    // This "li" selector will only select children
    // of the element that receives `scope`.
    animate("li", { opacity: 1 })
  })
  
  return <ul ref={scope}>{children}</ul>
}

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

用法

从 Motion 导入

// Mini
import { useAnimate } from "motion/react-mini"

// Hybrid
import { useAnimate } from "motion/react"

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

function Component() {
  const [scope, animate] = useAnimate()

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

function Component({ children }) {
  const [scope, animate] = useAnimate()
  
  return <ul ref={scope}>{children}</ul>
}

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

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

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

或者通过传递一个选择器给它

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

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

滚动触发的动画

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

import { useAnimate, useInView } from "motion/react"

function Component() {
  const [scope, animate] = useAnimate()
  const isInView = useInView(scope)
  
  useEffect(() => {
     if (isInView) {
       animate(scope.current, { opacity: 1 })
     }
  }, [isInView])
  
  return (
    <ul ref={scope}>
      <li />
      <li />
      <li />
    </ul>
  )
}

退出动画

当组件被移除时，可以使用 useAnimate 与 usePresence 结合使用来创建你自己的退出动画。

import { useAnimate, usePresence } from "framer-motion"

function Component() {
  const [isPresent, safeToRemove] = usePresence()
  const [scope, animate] = useAnimate()
  
  useEffect(() => {
     if (isPresent) {
       const enterAnimation = async () => {
         await animate(scope.current, { opacity: 1 })
         await animate("li", { opacity: 1, x: 0 })
       }
       enterAnimation()

     } else {
       const exitAnimation = async () => {
         await animate("li", { opacity: 0, x: -100 })
         await animate(scope.current, { opacity: 0 })
         safeToRemove()
       }
       
       exitAnimation()
     }
  }, [isPresent])
  
  return (
    <ul ref={scope}>
      <li />
      <li />
      <li />
    </ul>
  )
}

现在，这个组件可以作为 AnimatePresence 的子组件进行条件渲染。

<AnimatePresence>
  {show ? <Component key="dialog" /> : null}
</AnimatePresence>

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

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

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

function Component() {
  const [scope, animate] = useAnimate()

  useEffect(() => {
    // This "li" selector will only select children
    // of the element that receives `scope`.
    animate("li", { opacity: 1 })
  })
  
  return <ul ref={scope}>{children}</ul>
}

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

用法

从 Motion 导入

// Mini
import { useAnimate } from "motion/react-mini"

// Hybrid
import { useAnimate } from "motion/react"

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

function Component() {
  const [scope, animate] = useAnimate()

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

function Component({ children }) {
  const [scope, animate] = useAnimate()
  
  return <ul ref={scope}>{children}</ul>
}

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

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

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

或者通过传递一个选择器给它

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

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

滚动触发的动画

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

import { useAnimate, useInView } from "motion/react"

function Component() {
  const [scope, animate] = useAnimate()
  const isInView = useInView(scope)
  
  useEffect(() => {
     if (isInView) {
       animate(scope.current, { opacity: 1 })
     }
  }, [isInView])
  
  return (
    <ul ref={scope}>
      <li />
      <li />
      <li />
    </ul>
  )
}

退出动画

当组件被移除时，可以使用 useAnimate 与 usePresence 结合使用来创建你自己的退出动画。

import { useAnimate, usePresence } from "framer-motion"

function Component() {
  const [isPresent, safeToRemove] = usePresence()
  const [scope, animate] = useAnimate()
  
  useEffect(() => {
     if (isPresent) {
       const enterAnimation = async () => {
         await animate(scope.current, { opacity: 1 })
         await animate("li", { opacity: 1, x: 0 })
       }
       enterAnimation()

     } else {
       const exitAnimation = async () => {
         await animate("li", { opacity: 0, x: -100 })
         await animate(scope.current, { opacity: 0 })
         safeToRemove()
       }
       
       exitAnimation()
     }
  }, [isPresent])
  
  return (
    <ul ref={scope}>
      <li />
      <li />
      <li />
    </ul>
  )
}

现在，这个组件可以作为 AnimatePresence 的子组件进行条件渲染。

<AnimatePresence>
  {show ? <Component key="dialog" /> : null}
</AnimatePresence>

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

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

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

function Component() {
  const [scope, animate] = useAnimate()

  useEffect(() => {
    // This "li" selector will only select children
    // of the element that receives `scope`.
    animate("li", { opacity: 1 })
  })
  
  return <ul ref={scope}>{children}</ul>
}

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

用法

从 Motion 导入

// Mini
import { useAnimate } from "motion/react-mini"

// Hybrid
import { useAnimate } from "motion/react"

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

function Component() {
  const [scope, animate] = useAnimate()

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

function Component({ children }) {
  const [scope, animate] = useAnimate()
  
  return <ul ref={scope}>{children}</ul>
}

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

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

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

或者通过传递一个选择器给它

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

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

滚动触发的动画

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

import { useAnimate, useInView } from "motion/react"

function Component() {
  const [scope, animate] = useAnimate()
  const isInView = useInView(scope)
  
  useEffect(() => {
     if (isInView) {
       animate(scope.current, { opacity: 1 })
     }
  }, [isInView])
  
  return (
    <ul ref={scope}>
      <li />
      <li />
      <li />
    </ul>
  )
}

退出动画

当组件被移除时，可以使用 useAnimate 与 usePresence 结合使用来创建你自己的退出动画。

import { useAnimate, usePresence } from "framer-motion"

function Component() {
  const [isPresent, safeToRemove] = usePresence()
  const [scope, animate] = useAnimate()
  
  useEffect(() => {
     if (isPresent) {
       const enterAnimation = async () => {
         await animate(scope.current, { opacity: 1 })
         await animate("li", { opacity: 1, x: 0 })
       }
       enterAnimation()

     } else {
       const exitAnimation = async () => {
         await animate("li", { opacity: 0, x: -100 })
         await animate(scope.current, { opacity: 0 })
         safeToRemove()
       }
       
       exitAnimation()
     }
  }, [isPresent])
  
  return (
    <ul ref={scope}>
      <li />
      <li />
      <li />
    </ul>
  )
}

现在，这个组件可以作为 AnimatePresence 的子组件进行条件渲染。

<AnimatePresence>
  {show ? <Component key="dialog" /> : null}
</AnimatePresence>

升级指南

useAnimationFrame

保持关注

订阅以获取最新新闻和更新。

©2025 Motion Division Ltd.
站点

关于

博客

文档

示例

Motion+

赞助

社交媒体

Discord

GitHub

X/Twitter

Bluesky

保持关注

订阅以获取最新新闻和更新。

©2025 Motion Division Ltd.
站点

关于

博客

文档

示例

Motion+

赞助

社交媒体

Discord

GitHub

X/Twitter

Bluesky