Animate layout changes for a single child component.
Preview
Wraps content that may animate during updates.
Usage
go
1node := models.WidgetNode{2 Type: models.WidgetNodeTypeTransition,3 Children: []models.WidgetNode{4 {Type: models.WidgetNodeTypeText, Value: "Animated content"},5 },6}Props
| Name | Type | Description | Default |
|---|---|---|---|
type | "transition" | Node type | required |
children | WidgetNode | Single child component to animate | required |
Examples
Animated Status
go
1{2 Type: models.WidgetNodeTypeTransition,3 Children: []models.WidgetNode{4 {Type: models.WidgetNodeTypeBadge, Label: status, Variant: statusVariant},5 },6}Animated Content Swap
go
1{2 Type: models.WidgetNodeTypeTransition,3 Children: []models.WidgetNode{4 {5 Type: models.WidgetNodeTypeCol,6 Gap: 2,7 Children: dynamicContent,8 },9 },10}TypeScript
typescript
1const node: WidgetNode = {2 type: "transition",3 children: [4 { type: "text", value: "Animated content" },5 ],6}When to Use
Transition is useful when:
- Content changes dynamically - Status updates, loading states
- Items appear/disappear - Lists that add/remove items
- Layout shifts - Content that changes size
Best Practices
- Wrap single logical units - One child per transition
- Use sparingly - Too many animations distract
- Consider reduced motion - Respects user preferences