文档

示例

获取 Motion+

文档

示例

获取 Motion+

文档

示例

获取 Motion+

文档

文档

JS

React

Vue

示例

开始使用

动画

组件

Motion 值

Hooks

集成

JS

React

Vue

示例

开始使用

动画

组件

Motion 值

Hooks

集成

Vue

useReducedMotion

useReducedMotion

一个 Hook，如果当前设备启用了“减少动态效果”设置，则返回 true。

const shouldReduceMotion = useReducedMotion()

这可以用于根据“减少动态效果”设置来更改你的 UI。例如，将可能引起晕动症的 x/y 动画替换为 opacity，禁用背景视频的自动播放，或关闭视差滚动效果。

它将积极响应更改，并使用最新的设置重新渲染你的组件。

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

const props = defineProps({
  isOpen: Boolean
})

const shouldReduceMotion = useReducedMotion()
const closedX = computed(()=>shouldReduceMotion.value ? 0 : '-100%')
</script>

<template>
  <Motion
    :animate="{
      opacity: isOpen ? 1 : 0,
      x: isOpen ? 0 : closedX
    }"
  />
</template>

用法

从 Motion 导入 useReducedMotion

import { useReducedMotion } from "motion-v"

在任何组件中，调用 useReducedMotion 以检查设备是否启用了“减少动态效果”设置。

const prefersReducedMotion = useReducedMotion()

然后，你可以使用此 true/false 值来更改你的应用程序逻辑。

一个 Hook，如果当前设备启用了“减少动态效果”设置，则返回 true。

const shouldReduceMotion = useReducedMotion()

这可以用于根据“减少动态效果”设置来更改你的 UI。例如，将可能引起晕动症的 x/y 动画替换为 opacity，禁用背景视频的自动播放，或关闭视差滚动效果。

它将积极响应更改，并使用最新的设置重新渲染你的组件。

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

const props = defineProps({
  isOpen: Boolean
})

const shouldReduceMotion = useReducedMotion()
const closedX = computed(()=>shouldReduceMotion.value ? 0 : '-100%')
</script>

<template>
  <Motion
    :animate="{
      opacity: isOpen ? 1 : 0,
      x: isOpen ? 0 : closedX
    }"
  />
</template>

用法

从 Motion 导入 useReducedMotion

import { useReducedMotion } from "motion-v"

在任何组件中，调用 useReducedMotion 以检查设备是否启用了“减少动态效果”设置。

const prefersReducedMotion = useReducedMotion()

然后，你可以使用此 true/false 值来更改你的应用程序逻辑。

一个 Hook，如果当前设备启用了“减少动态效果”设置，则返回 true。

const shouldReduceMotion = useReducedMotion()

这可以用于根据“减少动态效果”设置来更改你的 UI。例如，将可能引起晕动症的 x/y 动画替换为 opacity，禁用背景视频的自动播放，或关闭视差滚动效果。

它将积极响应更改，并使用最新的设置重新渲染你的组件。

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

const props = defineProps({
  isOpen: Boolean
})

const shouldReduceMotion = useReducedMotion()
const closedX = computed(()=>shouldReduceMotion.value ? 0 : '-100%')
</script>

<template>
  <Motion
    :animate="{
      opacity: isOpen ? 1 : 0,
      x: isOpen ? 0 : closedX
    }"
  />
</template>

用法

从 Motion 导入 useReducedMotion

import { useReducedMotion } from "motion-v"

在任何组件中，调用 useReducedMotion 以检查设备是否启用了“减少动态效果”设置。

const prefersReducedMotion = useReducedMotion()

然后，你可以使用此 true/false 值来更改你的应用程序逻辑。

useInView

将 Motion 与 Radix 集成

保持关注

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

©2025 Motion Division Ltd.
站点

关于

博客

文档

示例

Motion+

赞助

社交媒体

Discord

GitHub

X/Twitter

Bluesky

保持关注

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

©2025 Motion Division Ltd.
站点

关于

博客

文档

示例

Motion+

赞助

社交媒体

Discord

GitHub

X/Twitter

Bluesky