安装
示例
你好世界 👋
很高兴见到你
用法
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 | 动画持续时间（秒） |
delay | number | 0 | 动画开始前的延迟（秒） |
偏移量 | number | 6 | 动画的偏移量 |
direction | string | "向下" | 动画方向（上、下、左、右） |
在视图内 | 布尔值 | 否 | 当组件在视图内时是否触发动画 |
视图内边距 | 边距类型 | "-50像素" | 触发视图内动画的边距 |
模糊 | string | "6像素" | 动画期间应用的模糊量 |