I can't add Vue page transition with inertia js in vue js

Question

The transition Does not work in inertia page . if add appLayout between transition tag . its working . but all content gives transition.

Dashboard.vue

<template>
<admin-layout>
    <h1>Admin Dashboard</h1>
</admin-layout>
</template>

adminLayout.vue

<section class="adminPanel" :style="contentStyle">
    <AdminSvg/>
    <header-admin :style="headerStyle"/>
    <transition name="slide-fade">
        <div class="content">
            <slot></slot>
        </div>
    </transition>
    <sidebar-admin :style="sidebarStyle"/>
</section>

app.blade.php

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="csrf-token" content="{{ csrf_token() }}">
    <title>{{ config('app.name', 'Laravel') }}</title>
    <link rel="stylesheet" href="{{ asset('css/admin.css') }}">
    <script src="{{ asset('js/app.js') }}" defer></script>
</head>
<body>
    @inertia
</body>
</html>

MohKoma · Accepted Answer · 2022-05-11 11:33:54Z

6

Here is a simple solution that can help. In the Layout component, Use the $page.url of the current url as a key 🎉.

<transition name="fade" mode="out-in" appear>
     <div :key="$page.url">
          <slot  />
     </div>
</transition>

answered May 11, 2022 at 11:33

MohKoma

1,51215 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Michael Chukwu · Accepted Answer · 2020-10-13 05:51:24Z

3

Vue transition works when the element that is wrapped by the transition tag changes (inserted or removed). Since inertia uses the backend route, simulating a page change should help with this. - This is not optimal but it works!

<section class="adminPanel" :style="contentStyle">
    <AdminSvg/>
    <header-admin :style="headerStyle"/>
    <transition name="slide-fade">
        <div v-if="content-trigger" class="content">
            <slot></slot>
          

        </div>
    </transition>
        <sidebar-admin :style="sidebarStyle"/>
</section>
<style>
    /* durations and timing functions.*/
    .slide-fade-enter-active {
        transition: all .5s ease;
    }
    .slide-fade-leave-active {
        transition: all .8s cubic-bezier(1.0, 0.5, 0.8, 1.0);
    }
    .slide-fade-enter, .slide-fade-leave-to
        /* .slide-fade-leave-active below version 2.1.8 */ {
        transform: translateX(10px);
        opacity: 0;
    }
</style>
<script>
    export default {
        data() {
            return {
                content-trigger:false
            }
        },
        mounted(){
            this.content-trigger = true;
        }
    }
</script>

answered Oct 13, 2020 at 5:51

Michael Chukwu

314 bronze badges

1 Comment

fireball70 Over a year ago

Working!... Just to mention that "content-trigger" is not a valid value (contentTrigger or something...)

Erik Jhordy · Accepted Answer · 2025-02-18 18:05:44Z

0

Thanks to user Mohkoma for sharing this solution, it helped me a lot to implement transitions in my project with Inertia. I just wanted to make a small improvement: if you wrap the only around the main content, instead of spanning the entire page, the animation will affect only the content and not the header or footer. Here is an example of how I implemented it:

<template>
    <AppHeader />
    <main class="max-w-7xl">
        <Transition name="fade" mode="out-in" appear>
            <div :key="$page.url">
                <slot />
            </div>
        </Transition>
    </main>
    <AppFooter />
</template>

answered Feb 18 at 18:05

Erik Jhordy

1112 silver badges3 bronze badges

Collectives™ on Stack Overflow

I can't add Vue page transition with inertia js in vue js

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related