Global page transition setting

[JPortegijs]

Evening,

I saw a closed issue about route transitions. There was a reply that does the trick, but is it possible without an extra App.vue file. Maybe a nice feature to have some kind of setting to set a route transition. Or another solution that does not involve another App.vue file would work for me. 😃

Thanks in advance.

[Larsklopstra]

Make a default layout and wrap the <slot /> with a <transition></transition>, now apply the layout to every view

[boxybird]

I've created this Vue component to handle <inertia-link> clicks. It definitely has some opinions built-in (namely TailwindCSS)
, but it does abstract away the $nextTick() trick/hack I'm currently using. Maybe it will help someone else.

<template>
  <transition
    enter-active-class="duration-300 transition-all"
    leave-active-class="duration-300 transition-all"
    :enter-class="`opacity-75 transform ${enterClass}`"
  >
    <slot v-if="loaded"></slot>
  </transition>
</template>

<script>
export default {
  name: 'PageTransition',
  props: {
    direction: {
      type: String,
      default: 'bottom',
    },
  },
  data() {
    return {
      loaded: false,
    }
  },
  mounted() {
    this.$nextTick(() => (this.loaded = true))
  },
  computed: {
    enterClass() {
      switch (this.direction) {
        case 'top':
          return '-translate-y-8'
          break
        case 'right':
          return 'translate-x-8'
          break
        case 'bottom':
          return 'translate-y-8'
          break
        case 'left':
          return '-translate-x-8'
          break
        default:
          return 'translate-y-8'
          break
      }
    },
  },
}
</script>

<style>
</style>