Route Transition

Onomis offers useful animation properties that allow you to animate transitions between views when the route changes.

The default value of routeAnimation in the app.config.js is set to fade-in. Additionally, we've created a changeRouteAnimationaction in src/store/routeAnimationStore, allowing you to change the value dynamically.

<template>
  <EBtn @click="changeRouteAnimation('slide-right')">
    Slide-right
  </EBtn>
</template>

<script setup>
  import {useLoaderStore} from "@/store/LoaderStore"

  const loaderStore = useLoaderStore()
  
  // This is how you get the route animation value
  const {routeAnimation} = storeToRefs(loaderStore)

  const toggleRouteAnimation = (animation) => {
    // @possible-values: fade-in, slide-right, slide-left, slide-up
    loaderStore.toggleRouteAnimation(animation)
  }
</script>

Here's the list of animation values available for route transitions:

• fade-in
• slide-right
• slide-left
• slide-up