sveltejs / svelte-transitions

Officially supported transition plugins for Svelte

DEPRECATED — As of Svelte v3, transitions are built into the main package

svelte-transitions

Officially supported transitions plugin for Svelte. Includes the following:

• fade
• fly
• slide
• draw

Usage

Install with npm or yarn:

npm install --save svelte-transitions

Then add the plugins you need to your Svelte component's exported definition:

<label>
  <input type='checkbox' bind:checked='visible'> visible
</label>

{{#if visible}}
  <!-- use `in`, `out`, or `transition` (bidirectional) -->
  <div transition:fade>hello!</div>
{{/if}}

<script>
  import { fade } from 'svelte-transitions';

  export default {
    transitions: { fade }
  };
</script>

Tree-shaking

If you're using a module bundler that supports tree-shaking, such as Rollup, only the transitions your components use will be included in your app.

Universal module definition

If you really need it, a UMD build is available at svelte-transitions/dist/svelte-transitions.js, and will register itself as svelte.transitions. We recommend using a module bundler instead, however.

License

MIT

svelte-transitions's Issues

Add support for Scale transition

https://github.com/ekhaled/svelte-transitions-scale

Would you be open to including this as an official transition under the svelte-transitions banner?

I am willing to transfer the repository under the sveltejs user if you want.
I can also provide a pull request to this repo's Readme file, if you allow the transfer.
I'm also open to other suggestions.

Caveats:

The name svelte-transitions-scale is already taken on npm (which I didn't realise until I tried to publish it).

However, my version allows scaling to arbitrary factors, not just to scale(1). Because from and to are both configurable.

I also think from and to are more terse than initial.

Whatever you decide, I think we need a "blessed" scale transition plugin.

Allow transitions in units other than px

I was trying to get the fly transition to work with rem units, but it looks like px is hardcoded. It would be nice if we could pass in a "unit" option to override this.

transitions not working when on else block only

https://svelte.technology/repl?version=1.22.5&gist=cf3b605f52d9dfdcc49a0e8b6ab905f0
Neither the if nor the else block will transition when they become visible, although the else block has a transition:

{{#if !visible}}
    <div>hello!</div>
{{else}}
    <div transition:slide>bye!</div>
{{/if}}

If I put the transition on the if block, too, both will slide. Same for fade and fly.

Add a draw transition

Started working on one here, but it looks a bit crap because it turns out that an M command inside an SVG path element resets the dash, meaning you can't get a draw effect over a discontinuous path. Best way to handle that would be with staggered transitions: sveltejs/svelte#545

Testing svelte-transitions

Is there a way to test svelte-transitions?
I have used svelte-transitions in one of the svelte components TestComponent.
And I am using karma jasmine for testing the component.

<div class="test" tabindex="-1" transition:slide>
     ...
</div>

However with the introduction of transition:slide, I started getting an error as below.
Stack trace of the error:

TypeError: undefined is not an object (evaluating 'node.style.animation.split') in http://localhost:8082config/testUnit/test.files.js (line 580)
        generateKeyframes@http://localhost:8082webpack:///~/svelte/shared.js:94:0 <- config/testUnit/test.files.js:580:45
        start@http://localhost:8082webpack:///~/svelte/shared.js:146:0 <- config/testUnit/test.files.js:632:22
        run@http://localhost:8082webpack:///~/svelte/shared.js:130:0 <- config/testUnit/test.files.js:616:15
        http://localhost:8082config/testUnit/test.files.js:1032:23
        _flush@http://localhost:8082webpack:///~/svelte/shared.js:324:0 <- config/testUnit/test.files.js:810:26
        _set@http://localhost:8082config/testUnit/test.files.js:1102:13
        set@http://localhost:8082webpack:///~/svelte/shared.js:316:0 <- config/testUnit/test.files.js:802:11
        oncreate@http://localhost:8082webpack:///modules/notifications/notification.html:18:15 <- config/testUnit/test.files.js:881:12
        oncreate@[native code]
        _flush@http://localhost:8082webpack:///~/svelte/shared.js:324:0 <- config/testUnit/test.files.js:810:26
        TestComponent@http://localhost:8082config/testUnit/test.files.js:1278:13

I am not sure how to set this up for resolving node.style.animation.split.
Can you provide any clues to test this!

Transition from one component to another.

Hey,

I have an if/else block, and was hoping to smoothly fly one component out and the other in when the switch is toggled.

However, the behaviour I observe at the moment is that the second block jumps in underneath the first before it's out, creating an ugly jitter.

This seems like a common use case? Is there a standard fix?

transitions not working when a custom component include any transition.

the example:

https://svelte.technology/repl?version=1.31.0&gist=e9dedb05fee495356046c11316a3bceb