Skip to main content
Slides an element in and out by animating its height (or width) along with padding, margin, and border properties. The element appears to expand or collapse smoothly.

​
Usage

<script>
	import { slide } from 'svelte/transition';
</script>

<div transition:slide>slides in and out</div>

<div in:slide>slides in</div>

<div out:slide>slides out</div>

​
Parameters

​
delay
number
default:"0"
Milliseconds before starting the transition
​
duration
number
default:"400"
Duration of the transition in milliseconds
​
easing
function
default:"cubicOut"
An easing function that controls the animation curve
​
axis
'x' | 'y'
default:"'y'"
The axis along which to slide. Use 'y' for vertical sliding (height) or 'x' for horizontal sliding (width)

​
Example with parameters

<script>
	import { slide } from 'svelte/transition';
	import { quintOut } from 'svelte/easing';
</script>

<div transition:slide={{ duration: 600, easing: quintOut }}>
	slides vertically
</div>

<div transition:slide={{ axis: 'x' }}>
	slides horizontally
</div>

​
Notes

The slide transition works best with elements that have a default display value of block, inline-block, flex, or grid. It may not work correctly with elements that have display: contents, display: inline, or display: table.