https://github.com/sveltejs/svelte-transitions-fade

Fade transition plugin for Svelte
https://github.com/sveltejs/svelte-transitions-fade

Last synced: about 2 months ago
JSON representation

Fade transition plugin for Svelte

• Host: GitHub
• URL: https://github.com/sveltejs/svelte-transitions-fade
• Owner: sveltejs
• License: mit
• Archived: true
• Created: 2017-05-07T03:18:15.000Z (over 8 years ago)
• Default Branch: master
• Last Pushed: 2019-08-09T19:45:31.000Z (over 6 years ago)
• Last Synced: 2025-09-03T12:42:04.406Z (2 months ago)
• Language: JavaScript
• Size: 5.86 KB
• Stars: 8
• Watchers: 3
• Forks: 3
• 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-fade

Fade transition plugin for [Svelte](https://svelte.technology). [Demo](https://svelte.technology/repl?version=2.5.0&gist=0bd4023626fe4256472e209dcdfac39f)

![fade-hello](https://cloud.githubusercontent.com/assets/1162160/25777721/d32984aa-32b3-11e7-9312-2e4582b86926.gif)

## 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-fade

```

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

```html

   visible

{#if visible}

  

  
hello!

{/if}


  import fade from 'svelte-transitions-fade';

  export default {

    transitions: { fade }

  };

```

## Parameters

You can specify `delay` and `duration` parameters, which default to `0` and `400` respectively:

```html



  fades in slowly after a short delay



```


## License

[MIT](LICENSE)