slide

API reference for the slide transition in Svelte

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.