useReducedMotion
一个 Hook，如果当前设备启用了“减少动态效果”设置，则返回 true。
const shouldReduceMotion = useReducedMotion()
这可以用于根据“减少动态效果”在您的 UI 中实现更改。例如，将可能引起晕动症的 x/y 动画替换为 opacity，禁用背景视频的自动播放，或关闭视差运动。
它将积极响应更改，并使用最新设置重新渲染您的组件。
export function Sidebar({ isOpen }) { const shouldReduceMotion = useReducedMotion() const closedX = shouldReduceMotion ? 0 : "-100%" return ( <motion.div animate={{ opacity: isOpen ? 1 : 0, x: isOpen ? 0 : closedX }} /> ) }
用法
从 Motion 导入 useReducedMotion
import { useReducedMotion } from "motion/react"
在任何组件中，调用 useReducedMotion 以检查设备是否启用了“减少动态效果”设置。
const prefersReducedMotion = useReducedMotion()
然后，您可以使用此 true/false 值来更改您的应用程序逻辑。
一个 Hook，如果当前设备启用了“减少动态效果”设置，则返回 true。
const shouldReduceMotion = useReducedMotion()
这可以用于根据“减少动态效果”在您的 UI 中实现更改。例如，将可能引起晕动症的 x/y 动画替换为 opacity，禁用背景视频的自动播放，或关闭视差运动。
它将积极响应更改，并使用最新设置重新渲染您的组件。
export function Sidebar({ isOpen }) { const shouldReduceMotion = useReducedMotion() const closedX = shouldReduceMotion ? 0 : "-100%" return ( <motion.div animate={{ opacity: isOpen ? 1 : 0, x: isOpen ? 0 : closedX }} /> ) }
用法
从 Motion 导入 useReducedMotion
import { useReducedMotion } from "motion/react"
在任何组件中，调用 useReducedMotion 以检查设备是否启用了“减少动态效果”设置。
const prefersReducedMotion = useReducedMotion()
然后，您可以使用此 true/false 值来更改您的应用程序逻辑。
一个 Hook，如果当前设备启用了“减少动态效果”设置，则返回 true。
const shouldReduceMotion = useReducedMotion()
这可以用于根据“减少动态效果”在您的 UI 中实现更改。例如，将可能引起晕动症的 x/y 动画替换为 opacity，禁用背景视频的自动播放，或关闭视差运动。
它将积极响应更改，并使用最新设置重新渲染您的组件。
export function Sidebar({ isOpen }) { const shouldReduceMotion = useReducedMotion() const closedX = shouldReduceMotion ? 0 : "-100%" return ( <motion.div animate={{ opacity: isOpen ? 1 : 0, x: isOpen ? 0 : closedX }} /> ) }
用法
从 Motion 导入 useReducedMotion
import { useReducedMotion } from "motion/react"
在任何组件中，调用 useReducedMotion 以检查设备是否启用了“减少动态效果”设置。
const prefersReducedMotion = useReducedMotion()
然后，您可以使用此 true/false 值来更改您的应用程序逻辑。
