Transition fade in AND out creates 2 instances

[rottmann]

Use your example https://github.com/AlexxNB/tinro#transitions

<!-- Transition.svelte -->
<script>
    import {router} from 'tinro';
    import {fade} from 'svelte/transition';
</script>

{#key $router.path}
    <div in:fade="{{ duration: 700}}">
        <slot></slot>
    </div>
{/key}

<!-- Route.svelte -->
<Transition> 
    <Route path="/">...</Route>
    <Route path="/page1">...</Route>
    <Route path="/page2">...</Route>
</Transition>

When you are at / and navigate to /page1: it fades /page1 in.

But as soon as you add out:fade="{{ duration: 700}}" after in:fade..., you see a fade in transition of /page1 and the full contents of / and /page1 that fade out.

/page1 got instanciated 2 times.

Currently i conceal the view problem with a kind of this code:

<Transition>
  <div style="display: {$router.path === '/' ? 'block' : 'none' }">
    <Route path="/">...</Route>
  </div>

  <div style="display: {$router.path === '/page1' ? 'block' : 'none' }">
    <Route path="/page1">...</Route>
  </div>

  <div style="display: {$router.path === '/page2' ? 'block' : 'none' }">
    <Route path="/page2">...</Route>
  </div>
</Transition>

This does not prevent the router to create 2 instances of /page1

Is there any solution for this?