https://github.com/auroratide/svelte-custom-element-transitions

Utility for making svelte transitions work on custom elements
https://github.com/auroratide/svelte-custom-element-transitions

Last synced: about 14 hours ago
JSON representation

Utility for making svelte transitions work on custom elements

• Host: GitHub
• URL: https://github.com/auroratide/svelte-custom-element-transitions
• Owner: Auroratide
• License: isc
• Created: 2021-04-24T02:03:39.000Z (over 3 years ago)
• Default Branch: master
• Last Pushed: 2021-04-29T20:56:27.000Z (over 3 years ago)
• Last Synced: 2024-08-08T19:42:05.587Z (3 months ago)
• Language: TypeScript
• Homepage:
• Size: 309 KB
• Stars: 2
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# Svelte Custom Element Transitions

It's a [known issue](https://github.com/sveltejs/svelte/issues/1825) that Svelte transitions do not work when compiling to custom elements (aka, web components). There's an active [Pull Request](https://github.com/sveltejs/svelte/pull/5870) which has been around for several months.

Hopefully that PR will be merged in the near future. But in case it doesn't, at least you have **@auroratide/svelte-custom-element-transitions**! This tiny module works around the issue by applying the CSS rules directly to the target node with Javascript.

```html

  import { fade } from '@auroratide/svelte-custom-element-transitions'

Hello!

```


This module also provides a higher order function which can make custom transitions work as well.

```js

import { forCustomElement } from '@auroratide/svelte-custom-element-transitions'

export const myTransition = forCustomElement((node, params) => {

    // ...

})

```

See the **[examples](examples)** for different possible use cases.

> By the way, each example is run as an automated test!

## Contributing

This library is intended to become deprecated as soon as Svelte has an official solution. In the meantime, here are some helpful notes for anyone who wants to contribute:

* `npm run build`: Build the library

* `npm test`: Run verification script (in Chrome)

* `npm run example`: See transitions in action