安装
示例
你好世界 👋
很高兴认识你
用法
import { BlurFade } from "@/components/magicui/blur-fade";<BlurFade>
<img src="https://picsum.photos/300/200?random=1" alt="Sample 1" />
<img src="https://picsum.photos/300/200?random=2" alt="Sample 2" />
<img src="https://picsum.photos/300/200?random=3" alt="Sample 3" />
</BlurFade>属性
| 属性 | 类型 | 默认值 | 描述 |
|---|---|---|---|
children | React.ReactNode | - | 要动画化的内容 |
className | string | - | 要应用于组件的类名 |
变体 | 对象 | - | 用于运动组件的自定义动画变体 |
持续时间 | number | 0.4 | 动画持续时间（秒） |
延迟 | number | 0 | 动画开始前的延迟时间（秒） |
偏移 | number | 6 | 动画偏移量 |
方向 | string | "向下" | 动画方向（向上, 向下, 向左, 向右） |
可见 | boolean | false | 当组件在视图中时是否触发动画 |
视图内边距 | 边距类型 | "-50px" | 触发视图内动画的边距 |
模糊 | string | "6px" | 动画过程中应用的模糊量 |