# Transition

> Animate layout changes for a single child component.

**URL:** https://inference.sh/docs/agents/widgets/transition
**Last updated:** 2026-09-18

---

Animate layout changes for a single child component.

## Preview

Wraps content that may animate during updates.

## Usage

```go
node := models.WidgetNode{
    Type: models.WidgetNodeTypeTransition,
    Children: []models.WidgetNode{
        {Type: models.WidgetNodeTypeText, Value: "Animated content"},
    },
}
```

## Props

| Name | Type | Description | Default |
|------|------|-------------|---------|
| `type` | `"transition"` | Node type | required |
| `children` | `WidgetNode` | Single child component to animate | required |

## Examples

### Animated Status

```go
{
    Type: models.WidgetNodeTypeTransition,
    Children: []models.WidgetNode{
        {Type: models.WidgetNodeTypeBadge, Label: status, Variant: statusVariant},
    },
}
```

### Animated Content Swap

```go
{
    Type: models.WidgetNodeTypeTransition,
    Children: []models.WidgetNode{
        {
            Type: models.WidgetNodeTypeCol,
            Gap:  2,
            Children: dynamicContent,
        },
    },
}
```

## TypeScript

```typescript
const node: WidgetNode = {
  type: "transition",
  children: [
    { type: "text", value: "Animated content" },
  ],
}
```

## When to Use

Transition is useful when:

1. **Content changes dynamically** - Status updates, loading states
2. **Items appear/disappear** - Lists that add/remove items
3. **Layout shifts** - Content that changes size

## Best Practices

1. **Wrap single logical units** - One child per transition
2. **Use sparingly** - Too many animations distract
3. **Consider reduced motion** - Respects user preferences