adamf/web_server
1
1
Fork 0
Code Issues 5 Pull Requests Actions Packages Projects Releases Wiki Activity

Add slide transition for route navigation
All checks were successful
Deploy with Docker Compose / deploy (push) Successful in 15s
Details

Browse Source 
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Adam French
2026-03-25 21:35:41 +00:00
parent 0f801a864c
commit a8ef10498e
2 changed files with 19 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
vue/src/App.vue
View File

@@ -6,7 +6,11 @@ import Footer from "@/components/Footer.vue";
<template> <template>
<Navbar class="no-print sticky" /> <Navbar class="no-print sticky" />
<RouterView /> <RouterView v-slot="{ Component }">
<Transition name="slide" mode="out-in">
<component :is="Component" :key="$route.path" />
</Transition>
</RouterView>
<!-- <Footer style="height: 10vh" /> --> <!-- <Footer style="height: 10vh" /> -->
</template> </template>

14
vue/src/assets/styles.css
View File

@@ -1,5 +1,19 @@
@import "tailwindcss"; @import "tailwindcss";
/* Route transitions */
.slide-enter-active,
.slide-leave-active {
transition: transform 0.3s ease, opacity 0.3s ease;
}
.slide-enter-from {
transform: translateX(30px);
opacity: 0;
}
.slide-leave-to {
transform: translateX(-30px);
opacity: 0;
}
/* PRINTING */ /* PRINTING */
@media print { @media print {