https://github.com/sveltejs/svelte-transitions-draw
Draw transition plugin for Svelte
https://github.com/sveltejs/svelte-transitions-draw
Last synced: 3 months ago
JSON representation
Draw transition plugin for Svelte
- Host: GitHub
- URL: https://github.com/sveltejs/svelte-transitions-draw
- Owner: sveltejs
- License: other
- Archived: true
- Created: 2018-05-17T00:29:19.000Z (almost 7 years ago)
- Default Branch: master
- Last Pushed: 2019-08-09T19:47:28.000Z (over 5 years ago)
- Last Synced: 2024-04-14T09:05:00.298Z (about 1 year ago)
- Language: JavaScript
- Homepage: https://svelte.technology/repl?version=2.6.2&gist=897a0ede58c59201d57cee7f119bee50
- Size: 3.91 KB
- Stars: 16
- Watchers: 4
- Forks: 5
- Open Issues: 1
-
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-draw ([demo](https://svelte.technology/repl?version=2.6.2&gist=897a0ede58c59201d57cee7f119bee50))
Draw transition plugin for [Svelte](https://svelte.technology).
This transition will only work with `` 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-draw
```
Then add the plugin to your Svelte component's exported definition:
```html
visible
{#if visible}
{/if}
import draw from 'svelte-transitions-draw';
export default {
transitions: { draw }
};
```
## Parameters
As with most transitions, you can specify `delay` and `duration` parameters (both in milliseconds) and a custom `easing` function (which should live on your `helpers`):
```html
import draw from 'svelte-transitions-draw';
import { elasticOut } from 'eases-jsnext';
export default {
helpers: { elasticOut },
transitions: { draw }
};
```
## License
[LIL](LICENSE)