# Alpine.js Transitions Reference

Transitions work with `x-show`. Note: `x-if` does NOT support transitions.

## Helper syntax (quick)

```html
<!-- Default fade + scale -->
<div x-show="open" x-transition>

<!-- Opacity only (no scale) -->
<div x-show="open" x-transition.opacity>

<!-- Custom duration -->
<div x-show="open" x-transition.duration.300ms>

<!-- Separate enter/leave durations -->
<div x-show="open"
  x-transition:enter.duration.500ms
  x-transition:leave.duration.200ms>

<!-- Custom scale (default 95%) -->
<div x-show="open" x-transition.scale.80>

<!-- Scale origin -->
<div x-show="open" x-transition.scale.80.origin.top.left>

<!-- Delay -->
<div x-show="open" x-transition.delay.100ms>
```

## CSS class syntax (full control with Tailwind)

```html
<div x-show="open"
  x-transition:enter="transition ease-out duration-300"
  x-transition:enter-start="opacity-0 scale-90"
  x-transition:enter-end="opacity-100 scale-100"
  x-transition:leave="transition ease-in duration-200"
  x-transition:leave-start="opacity-100 scale-100"
  x-transition:leave-end="opacity-0 scale-90">
```

| Stage          | Applied                                                 |
| -------------- | ------------------------------------------------------- |
| `:enter`       | Throughout entire enter phase                           |
| `:enter-start` | Before element inserted, removed 1 frame after          |
| `:enter-end`   | 1 frame after insert, removed when transition ends      |
| `:leave`       | Throughout entire leave phase                           |
| `:leave-start` | When leave starts, removed 1 frame after                |
| `:leave-end`   | 1 frame after leave start, removed when transition ends |

## Collapse plugin (height animation)

```html
<!-- Requires @alpinejs/collapse -->
<div x-show="open" x-collapse>
<div x-show="open" x-collapse.duration.500ms>
<div x-show="open" x-collapse.min.50px>  <!-- partial collapse -->
```