Transitions

TabsTransition

The transition can be seen here Example (source ).

  • Zooms in when traversing towards the leaves
  • Zooms out when traversing towards the root
  • Slides left if the current index is smaller than the previous
  • Slides right if the current index is bigger than the previous

Usage

<script> import { writable } from 'svelte/store' import { TabsTransition } from '@roxi/routify/decorators' const width = writable() </script> <div bind:offsetWidth={$width}> <slot decorator={TabsTransition} scoped={{ width }} /> </div>
<script>
  import { writable } from 'svelte/store'
  import { TabsTransition } from '@roxi/routify/decorators'
  const width = writable()
</script>

<div bind:offsetWidth={$width}>
  <slot decorator={TabsTransition} scoped={{ width }} />
</div>

BaseTransition

Template for creating your own decorations.

<script> import { BaseTransition } from '@roxi/routify/decorators' import { fade } from 'svelte/transition' const configs = [ { condition: (meta)=>true, transition: fade, /** inParams: {}, optional **/ /** outParams: {} optional **/ } ] </script> <BaseTransition {configs}> <slot /> </BaseTransition>
<script>
  import { BaseTransition } from '@roxi/routify/decorators'
  import { fade } from 'svelte/transition'

  const configs = [
    {
        condition: (meta)=>true,
        transition: fade,
        /** inParams: {},  optional **/
        /** outParams: {}  optional **/
    }
  ]
</script>

<BaseTransition {configs}>
  <slot />
</BaseTransition>

BaseTransition uses the first transition it finds where the condition is true.

The meta object passed to the condition function is reactive and contains:

  • toAncestor - bool
  • toDescendant - bool
  • toHigherIndex - bool
  • toLowerIndex -bool
  • routes : [newRoute, oldRoute] - array
  • ancestors : [ancestor, oldAncestor] - array (concestors)

Writing good documentation that is up-to-date is difficult. If you notice a mistake, help us out.