How do I add page transitions with Inertia and vue?

[ApolloDevs]

I have attempted a few examples that I have found online but sadly I haven't really got anywhere. I'm using the Laravel adapter with InertiaJS and Vue and TailwindCSS.

Say I have the following layout -

<AppLayout>
<ProfileSidebar />
<Slot></Slot>
<AppLayout />

How would I make the items inside the slot transition when selecting a new page from the sidebar? I've tried the class with CSS in a <style> tag in the component but no transitions take place. (with wrapped around the slot!) Looking for a basic example to get me off the ground!

Thank you.

[ajnsn]

@ApolloDevs Try to wrap your slot with a Vue transition, e.g.

<transition name="fade" mode="out-in" appear>
    <slot />
</transition>

CSS for Vue 3

.fade-enter-active,
.fade-leave-active {
    @apply transition-opacity;
}

.fade-enter-from,
.fade-leave-to {
    @apply opacity-0;
}

[ultimateshadsform]

I tried this and it's not working in laravel 11 for some reason it doesn't animate and I have wrapped all pages in a layout

[Saad5400]

me neither, have you found anything?

[Saad5400]

Ok I found out that I should place the css classes inside the style element in the component itself, and not in app.css, for example:

<template>
  <transition name="fade" mode="out-in" appear>
    <div>
      <slot/>
    </div>
  </transition>
</template>

<style scoped>
.fade-enter-active,
.fade-leave-active {
  @apply transition-opacity;
}

.fade-enter-from,
.fade-leave-to {
  @apply opacity-0;
}
</style>

[Saad5400]

Sadly, I was looking for a way to use view-transitions which will automatically animated the same element that change location within two different pages.

I can't seem to find anything ...

[Saad5400]

Finally I found what I was looking for: https://hjb.dev/posts/using-the-view-transitions-api-with-inertia-6

<script setup>
import { onUnmounted } from "vue";

if (document.startViewTransition) {
  function handleInertiaStart() {
    document.startViewTransition(async () => {
      return new Promise((resolve) => {
        document.addEventListener(
            "inertia:finish",
            () => {
              resolve();
            },
            {once: true},
        );
      });
    });
  }

  document.addEventListener("inertia:start", handleInertiaStart);
  onUnmounted(() => {
    document.removeEventListener("inertia:start", handleInertiaStart);
  });
}
</script>