SxAnimate (动画控制器)
- Implemented
用于控制入场动画的轻量组件。对齐 Microsoft Fluent UI Blazor Animate (v4.13.2) 的 API 结构,并说明 NextUI 当前实现状态。
使用场景
- 内容入场过渡
- 列表/卡片的动画表现
- 轻量级状态变化动效
约束说明
- 当前仅支持入场动画。
- 动画不会自动重触发,需通过重新渲染触发。
行为说明
Animation控制动画类型。Duration/Delay设置动画时长与延迟。
API
Parameters
| 状态 | 参数名 | 类型 | 默认值 | 描述 |
|---|---|---|---|---|
| Implemented | Animation |
AnimationType |
Fade |
动画类型。 |
| Implemented | Duration |
int |
400 |
持续时间 (ms)。 |
| Implemented | Delay |
int |
0 |
延迟时间 (ms)。 |
| Implemented | ChildContent |
RenderFragment? |
null |
动画内容。 |
| Implemented | Id (继承) |
string? |
null |
组件 Id。 |
| Implemented | Class (继承) |
string? |
null |
自定义 CSS 类名。 |
| Implemented | Style (继承) |
string? |
null |
自定义样式。 |
| Implemented | Title (继承) |
string? |
null |
HTML title 属性。 |
| Implemented | AdditionalAttributes (继承) |
IEnumerable<KeyValuePair<string, object>>? |
null |
捕获不匹配的 HTML 属性。 |
示例
<SxAnimate Animation="AnimationType.Fade">
<SxCard>
<SxTypography Variant="TypographyVariant.Body">内容</SxTypography>
</SxCard>
</SxAnimate>