Skip to content
This repository has been archived by the owner. It is now read-only.
master
Switch branches/tags
Go to file
Code

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
src
 
 
 
 
 
 
 
 
 
 
 
 

DEPRECATED — As of Svelte v3, transitions are built into the main package

svelte-transitions-slide

Slide transition plugin for Svelte. Demo

slide-hello

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:

npm install --save svelte-transitions-slide

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

<label>
  <input type='checkbox' bind:checked='visible'> visible
</label>

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

<script>
  import slide from 'svelte-transitions-slide';

  export default {
    transitions: { slide }
  };
</script>

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):

<div in:fade='{duration: 1000, easing: quintInOut}'>
  slides in slowly
</div>

<script>
  import slide from 'svelte-transitions-slide';
  import { quintInOut } from 'eases-jsnext';

  export default {
    helpers: { quintInOut },
    transitions: { slide }
  };
</script>

License

MIT