https://github.com/sveltejs/svelte-transitions-slide
Slide transition plugin for Svelte
https://github.com/sveltejs/svelte-transitions-slide
Last synced: 3 months ago
JSON representation
Slide transition plugin for Svelte
- Host: GitHub
- URL: https://github.com/sveltejs/svelte-transitions-slide
- Owner: sveltejs
- License: mit
- Archived: true
- Created: 2017-05-07T15:52:46.000Z (almost 8 years ago)
- Default Branch: master
- Last Pushed: 2019-08-09T19:47:39.000Z (over 5 years ago)
- Last Synced: 2024-04-14T16:06:24.550Z (about 1 year ago)
- Language: JavaScript
- Size: 4.88 KB
- Stars: 5
- Watchers: 4
- Forks: 2
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
## DEPRECATED — As of Svelte v3, transitions are built into the main package
# svelte-transitions-slide
Slide transition plugin for [Svelte](https://svelte.technology). [Demo](https://svelte.technology/repl?version=2.5.0&gist=b447904fdd05737538c24268cca144cc)
Note that this transition will behave oddly with `display: inline` elements.
## Usage
Recommended usage is via [svelte-transitions](https://github.com/sveltejs/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:
```bash
npm install --save svelte-transitions-slide
```
Then add the plugin to your Svelte component's exported definition:
```html
visible
{#if visible}
hello!
{/if}
import slide from 'svelte-transitions-slide';
export default {
transitions: { slide }
};
```
## 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`):
```html
slides in slowly
import slide from 'svelte-transitions-slide';
import { quintInOut } from 'eases-jsnext';
export default {
helpers: { quintInOut },
transitions: { slide }
};
```
## License
[MIT](LICENSE)