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 { TabsTransition } from '@roxi/routify/decorators'
</script>

<div>
  <slot decorator={TabsTransition} />
</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>

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)