HTWK/htwkalender
1
1
Fork 0
mirror of https://gitlab.dit.htwk-leipzig.de/htwk-software/htwkalender.git synced 2025-07-24 21:39:14 +02:00
Code Issues Packages Projects Releases Wiki Activity

fix overlapping transition declarations

Browse Source
This commit is contained in:
survellow
2024-01-17 21:03:14 +01:00
parent 32a1d41e45
commit 061d0bd21e
2 changed files with 17 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
frontend/src/App.vue
View File

@@ -35,7 +35,7 @@ window.addEventListener("resize", updateMobile);
<MenuBar /> <MenuBar />
<RouterView v-slot="{ Component }"> <RouterView v-slot="{ Component }">
<transition name="scale" mode="out-in"> <transition name="scale" mode="out-in">
<component :is="Component" /> <component :is="Component" class="origin-near-top"/>
</transition> </transition>
</RouterView> </RouterView>
<!-- show CalendarPreview but only on specific router views --> <!-- show CalendarPreview but only on specific router views -->
@@ -52,6 +52,10 @@ window.addEventListener("resize", updateMobile);
.scale-enter-from, .scale-enter-from,
.scale-leave-to { .scale-leave-to {
opacity: 0; opacity: 0;
transform: scale(0.9); transform: scale(0.95);
}
.origin-near-top {
transform-origin: center 33vh;
} }
</style> </style>

15
frontend/src/view/DynamicPage.vue
View File

@@ -24,11 +24,12 @@ const hasContent = computed(() => {
</script> </script>
<template> <template>
<div <div
class="flex flex-column align-items-center transition-all transition-duration-500 transition-ease-in-out mt-0" class="flex flex-column align-items-center mt-0"
:class="{ 'md:mt-8': hideContent }"
> >
<div class="flex align-items-center justify-content-center gap-2 mx-2"> <div class="flex align-items-center justify-content-center gap-2 mx-2 transition-rolldown"
:class="{'md:mt-8': hideContent}"
>
<h3 class="text-4xl"> <h3 class="text-4xl">
{{ headline }} {{ headline }}
</h3> </h3>
@@ -71,3 +72,9 @@ const hasContent = computed(() => {
</div> </div>
</div> </div>
</template> </template>
<style scoped>
.transition-rolldown {
transition: margin-top 0.5s ease-in-out;
}
</style>