|
@@ -46,15 +46,17 @@ You can override these defaults with modifiers attached to `x-transition`. Let's
|
|
<a name="customizing-duration"></a>
|
|
<a name="customizing-duration"></a>
|
|
### Customizing duration
|
|
### Customizing duration
|
|
|
|
|
|
|
|
+Initially, the duration is set to be 150 milliseconds when entering, and 75 milliseconds when leaving.
|
|
|
|
+
|
|
You can configure the duration you want for a transition with the `.duration` modifier:
|
|
You can configure the duration you want for a transition with the `.duration` modifier:
|
|
|
|
|
|
```alpine
|
|
```alpine
|
|
<div ... x-transition.duration.500ms>
|
|
<div ... x-transition.duration.500ms>
|
|
```
|
|
```
|
|
|
|
|
|
-The above `<div>` will transition for 500 milliseconds when entering, and 250 milliseconds when leaving.
|
|
|
|
|
|
+The above `<div>` will transition for 500 milliseconds when entering, and 500 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:
|
|
|
|
|
|
+If you wish to customize the durations specifically for entering and leaving, you can do that like so:
|
|
|
|
|
|
```alpine
|
|
```alpine
|
|
<div ...
|
|
<div ...
|