https://github.com/sveltejs/svelte-transitions-fly
Fly transition plugin for Svelte
https://github.com/sveltejs/svelte-transitions-fly
Last synced: 3 months ago
JSON representation
Fly transition plugin for Svelte
- Host: GitHub
- URL: https://github.com/sveltejs/svelte-transitions-fly
- Owner: sveltejs
- License: mit
- Archived: true
- Created: 2017-05-07T14:23:57.000Z (almost 8 years ago)
- Default Branch: master
- Last Pushed: 2019-08-09T19:47:13.000Z (over 5 years ago)
- Last Synced: 2024-04-14T12:04:22.279Z (about 1 year ago)
- Language: JavaScript
- Size: 7.81 KB
- Stars: 4
- 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-fly
Fly transition plugin for [Svelte](https://svelte.technology). [Demo](https://svelte.technology/repl?version=2.5.0&gist=07f809dba875d3c4f85ecd47a044ec3e)
## 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-fly
```
Then add the plugin to your Svelte component's exported definition:
```html
visible
{#if visible}
hello!
{/if}
import fly from 'svelte-transitions-fly';
export default {
transitions: { fly }
};
```
## Parameters
`x` and `y` are the position the node will fly in from (and out to). Both default to zero:
```html
flies in from the left
```
You can also specify `delay` and `duration` parameters, which default to `0` and `400` respectively, and a custom `easing` function (which should live on your `helpers`):
```html
wheee!!!!
import fly from 'svelte-transitions-fly';
import { elasticOut } from 'eases-jsnext';
export default {
helpers: { elasticOut },
transitions: { fly }
};
```
## License
[MIT](LICENSE)