MotionConfig

MotionConfig 组件可以用于为所有子 motion 组件设置配置选项组件.

import { motion, MotionConfig } from "motion/react"

export const MyComponent = ({ isVisible }) => (
  <MotionConfig transition={{ duration: 1 }}>
    <motion.div
        initial={{ opacity: 0 }}
        animate={{ opacity: 1 }}
      />
  </MotionConfig>
)

Props

transition

定义一个回退 transition，用于所有子 motion 组件。

reducedMotion

默认值： "never"

reducedMotion 允许你设置一个站点范围的策略来处理减少动态效果。它提供以下选项

• "user"：尊重用户的设备设置。

• "always"：强制减少动态效果 (用于调试很有用)。

• "never"：不尊重减少动态效果。

当减少动态效果开启时，transform 和 layout 动画将被禁用。其他动画，如 opacity 和 backgroundColor，将保持不变。

nonce

如果使用一个内容安全策略如果使用带有 nonce 属性的 内容安全策略，通过 MotionConfig 传递相同的属性将允许 Motion 生成的任何 style 块遵守安全策略。