1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
|
---
order: 10
title: transition
---
# x-transition
Alpine provides a robust transitions utility out of the box. With a few `x-transition` directives, you can create smooth transitions between when an element is shown or hidden.
There are two primary ways to handle transitions in Alpine:
* [The Transition Helper](#the-transition-helper)
* [Applying CSS Classes](#applying-css-classes)
<a name="the-transition-helper"></a>
## The transition helper
The simplest way to achieve a transition using Alpine is by adding `x-transition` to an element with `x-show` on it. For example:
```alpine
<div x-data="{ open: false }">
<button @click="open = ! open">Toggle</button>
<span x-show="open" x-transition>
Hello 👋
</span>
</div>
```
<!-- START_VERBATIM -->
<div class="demo">
<div x-data="{ open: false }">
<button @click="open = ! open">Toggle</button>
<span x-show="open" x-transition>
Hello 👋
</span>
</div>
</div>
<!-- END_VERBATIM -->
As you can see, by default, `x-transition` applies pleasant transition defaults to fade and scale the revealing element.
You can override these defaults with modifiers attached to `x-transition`. Let's take a look at those.
<a name="customizing-duration"></a>
### Customizing duration
You can configure the duration you want for a transition with the `.duration` modifier:
```alpine
<div ... x-transition.duration.500ms>
```
The above `<div>` will transition for 500 milliseconds when entering, and 250 milliseconds when leaving.
This difference in duration generally desirable default. If you wish to customize the durations specifically for entering and leaving, you can do that like so:
```alpine
<div ...
x-transition:enter.duration.500ms
x-transition:leave.duration.400ms
>
```
<a name="customizing-delay"></a>
### Customizing delay
You can delay a transition using the `.delay` modifier like so:
```alpine
<div ... x-transition.delay.50ms>
```
The above example will delay the transition and in and out of the element by 50 milliseconds.
<a name="customizing-opacity"></a>
### Customizing opacity
By default, Alpine's `x-transition` applies both a scale and opacity transition to achieve a "fade" effect.
If you wish to only apply the opacity transition (no scale), you can accomplish that like so:
```alpine
<div ... x-transition.opacity>
```
<a name="customizing-scale"></a>
### Customizing scale
Similar to the `.opacity` modifier, you can configure `x-transition` to ONLY scale (and not transition opacity as well) like so:
```alpine
<div ... x-transition.scale>
```
The `.scale` modifier also offers the ability to configure its scale values AND its origin values:
```alpine
<div ... x-transition.scale.80>
```
The above snippet will scale the element up and down by 80%.
Again, you may customize these values separately for enter and leaving transitions like so:
```alpine
<div ...
x-transition:enter.scale.80
x-transition:leave.scale.90
>
```
To customize the origin of the scale transition, you can use the `.origin` modifier:
```alpine
<div ... x-transition.scale.origin.top>
```
Now the scale will be applied using the top of the element as the origin, instead of the center by default.
Like you may have guessed, the possible values for this customization are: `top`, `bottom`, `left`, and `right`.
If you wish, you can also combine two origin values. For example, if you want the origin of the scale to be "top right", you can use: `.origin.top.right` as the modifier.
<a name="applying-css-classes"></a>
## Applying CSS classes
For direct control over exactly what goes into your transitions, you can apply CSS classes at different stages of the transition.
> The following examples use [TailwindCSS](https://tailwindcss.com/docs/transition-property) utility classes.
```alpine
<div x-data="{ open: false }">
<button @click="open = ! open">Toggle</button>
<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-300"
x-transition:leave-start="opacity-100 scale-100"
x-transition:leave-end="opacity-0 scale-90"
>Hello 👋</div>
</div>
```
<!-- START_VERBATIM -->
<div class="demo">
<div x-data="{ open: false }">
<button @click="open = ! open">Toggle</button>
<div
x-show="open"
x-transition:enter="transition ease-out duration-300"
x-transition:enter-start="opacity-0 transform scale-90"
x-transition:enter-end="opacity-100 transform scale-100"
x-transition:leave="transition ease-in duration-300"
x-transition:leave-start="opacity-100 transform scale-100"
x-transition:leave-end="opacity-0 transform scale-90"
>Hello 👋</div>
</div>
</div>
<!-- END_VERBATIM -->
| Directive | Description |
| --- | --- |
| `:enter` | Applied during the entire entering phase. |
| `:enter-start` | Added before element is inserted, removed one frame after element is inserted. |
| `:enter-end` | Added one frame after element is inserted (at the same time `enter-start` is removed), removed when transition/animation finishes.
| `:leave` | Applied during the entire leaving phase. |
| `:leave-start` | Added immediately when a leaving transition is triggered, removed after one frame. |
| `:leave-end` | Added one frame after a leaving transition is triggered (at the same time `leave-start` is removed), removed when the transition/animation finishes.
|
