MotionConfig

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

<script setup>
  import { motion, MotionConfig } from "motion-v"
</script>

<template>
  <MotionConfig :transition="{ duration: 1 }">
    <motion.div
        :initial="{ opacity: 0 }"
        :animate="{ opacity: 1 }"
      />
  </MotionConfig>
</template>

Props

transition

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

reducedMotion

默认值： "never"

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

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

• "always": 强制减少运动（用于调试）。

• "never": 不尊重减少运动。

当减少运动开启时，transform 和 layout 动画将被禁用。其他动画，例如 opacity 和 backgroundColor，将继续存在。

nonce

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