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

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

@@ -25,10 +25,11 @@ const hasContent = computed(() => {
<template>
<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"
>
<div class="flex align-items-center justify-content-center gap-2 mx-2 transition-rolldown"
:class="{'md:mt-8': hideContent}"
>
<div class="flex align-items-center justify-content-center gap-2 mx-2">
<h3 class="text-4xl">
{{ headline }}
</h3>
@@ -71,3 +72,9 @@ const hasContent = computed(() => {
</div>
</div>
</template>
<style scoped>
.transition-rolldown {
transition: margin-top 0.5s ease-in-out;
}
</style>