diff --git a/frontend/src/App.vue b/frontend/src/App.vue index 1455bad..35715c8 100644 --- a/frontend/src/App.vue +++ b/frontend/src/App.vue @@ -90,6 +90,9 @@ const notifications = useNotificationsStore() const route = useRoute() const router = useRouter() const isAppRoute = computed(() => route.name === 'app') +const appTransitionName = computed(() => + route.query.transition === 'app-switch' ? 'app-switch' : 'app-window', +) const isLocked = ref(false) const isUnlocking = ref(false) const simPicker = ref(null) @@ -430,8 +433,8 @@ onBeforeUnmount(() => { - - + + diff --git a/frontend/src/assets/main.css b/frontend/src/assets/main.css index 26f0f99..a1eee59 100644 --- a/frontend/src/assets/main.css +++ b/frontend/src/assets/main.css @@ -1026,6 +1026,35 @@ button { opacity: 1; border-radius: 0; } +.app-switch-enter-active, +.app-switch-leave-active { + transition: + transform 0.38s cubic-bezier(0.32, 0.72, 0, 1), + opacity 0.28s ease, + border-radius 0.38s ease; +} +.app-switch-enter-active { + z-index: 51; +} +.app-switch-leave-active { + z-index: 50; +} +.app-switch-enter-from { + transform: translateX(100%) scale(0.98); + opacity: 0.75; + border-radius: 24px; +} +.app-switch-leave-to { + transform: translateX(-22%) scale(0.96); + opacity: 0.35; + border-radius: 18px; +} +.app-switch-enter-to, +.app-switch-leave-from { + transform: none; + opacity: 1; + border-radius: 0; +} .native-app { position: absolute; inset: 0; diff --git a/frontend/src/views/apps/LocalPagesApp.vue b/frontend/src/views/apps/LocalPagesApp.vue index 2b0112f..d7da349 100644 --- a/frontend/src/views/apps/LocalPagesApp.vue +++ b/frontend/src/views/apps/LocalPagesApp.vue @@ -189,7 +189,10 @@ function openCityMarktListing(): void { if (!selected.value?.citymarkt_listing_id) return void router.push({ path: '/apps/citymarkt', - query: { listingId: selected.value.citymarkt_listing_id }, + query: { + listingId: selected.value.citymarkt_listing_id, + transition: 'app-switch', + }, }) } diff --git a/sky_phone/source/html/index.html b/sky_phone/source/html/index.html index b697ee2..2e191f6 100644 --- a/sky_phone/source/html/index.html +++ b/sky_phone/source/html/index.html @@ -4,8 +4,8 @@ Sky Phone - - + +