sveltejs/svelte-transitions-slide

Name: svelte-transitions-slide

Owner: Svelte

Description: Slide transition plugin for Svelte

Created: 2017-05-07 15:52:46.0

Updated: 2018-05-06 21:42:39.0

Pushed: 2018-05-06 21:42:38.0

Homepage: null

Size: 4

Language: JavaScript

GitHub Committers

User	Most Recent Commit	# Commits

Other Committers

User	Email	Most Recent Commit	# Commits

README

svelte-transitions-slide

Slide transition plugin for Svelte. Demo

Note that this transition will behave oddly with display: inline elements.

Usage

Recommended usage is via svelte-transitions, but you can use this module directly if you prefer. Note that it assumes an ES module or CommonJS environment.

Install with npm or yarn:

install --save svelte-transitions-slide

Then add the plugin to your Svelte component's exported definition:

el>
nput type='checkbox' bind:checked='visible'> visible
bel>

 visible}
-- use `in`, `out`, or `transition` (bidirectional) -->
iv transition:slide>hello!</div>
}

ipt>
port slide from 'svelte-transitions-slide';

port default {
transitions: { slide }

ript>

Parameters

You can specify delay and duration parameters, which default to 0 and 400 respectively, and a custom easing function (which should live on your helpers):

 in:fade='{duration: 1000, easing: quintInOut}'>
ides in slowly
v>

ipt>
port slide from 'svelte-transitions-slide';
port { quintInOut } from 'eases-jsnext';

port default {
helpers: { quintInOut },
transitions: { slide }

ript>

License

MIT