feat: use transition component everywhere

src/components/misc/CustomTransition.vue

@@ -1,12 +1,12 @@
 <template>
-	<transition name="flash-background">
+	<transition :name="name">
 		<slot  />
 	</transition>
 </template>
 
 <script setup lang="ts">
 defineProps<{
-	name: 'flash-background'
+	name: 'flash-background' | 'fade' | 'width' | 'modal'
 }>()
 </script>
 
@@ -34,4 +34,34 @@ $flash-background-duration: 750ms;
 		}
 	}
 }
+
+.fade-enter-active,
+.fade-leave-active {
+  transition: opacity $transition-duration;
+}
+
+.fade-enter-from,
+.fade-leave-to {
+  opacity: 0;
+}
+
+.width-enter-active,
+.width-leave-active {
+  transition: width $transition-duration;
+}
+
+.width-enter-from,
+.width-leave-to {
+  width: 0;
+}
+
+.modal-enter,
+.modal-leave-active {
+	opacity: 0;
+}
+
+.modal-enter .modal-container,
+.modal-leave-active .modal-container {
+	transform: scale(0.9);
+}
 </style>

src/components/misc/dropdown.vue

@@ -6,13 +6,13 @@
 			</BaseButton>
 		</slot>
 
-		<transition name="fade">
+		<CustomTransition name="fade">
 			<div class="dropdown-menu" v-if="open">
 				<div class="dropdown-content">
 					<slot :close="close"></slot>
 				</div>
 			</div>
-		</transition>
+		</CustomTransition>
 	</div>
 </template>
 
@@ -21,6 +21,7 @@ import {ref, type PropType} from 'vue'
 import {onClickOutside} from '@vueuse/core'
 import type {IconProp} from '@fortawesome/fontawesome-svg-core'
 
+import CustomTransition from '@/components/misc/CustomTransition.vue'
 import BaseButton from '@/components/base/BaseButton.vue'
 
 defineProps({

src/components/misc/modal.vue

@@ -1,7 +1,7 @@
 <template>
 	<Teleport to="body">
 		<!-- FIXME: transition should not be included in the modal -->
-		<transition :name="transitionName">
+		<CustomTransition :name="transitionName" appear>
 			<section
 				v-if="enabled"
 				class="modal-mask"
@@ -59,7 +59,7 @@
 					</div>
 				</div>
 			</section>
-		</transition>
+		</CustomTransition>
 	</Teleport>
 </template>
 
@@ -70,6 +70,7 @@ export default {
 </script>
 
 <script lang="ts" setup>
+import CustomTransition from '@/components/misc/CustomTransition.vue'
 import BaseButton from '@/components/base/BaseButton.vue'
 import {ref, useAttrs, watchEffect} from 'vue'
 import {useScrollLock} from '@vueuse/core'

src/components/misc/ready.vue

@@ -29,7 +29,7 @@
 			</card>
 		</no-auth-wrapper>
 	</section>
-	<transition name="fade">
+	<CustomTransition name="fade">
 		<section class="vikunja-loading" v-if="showLoading">
 			<Logo class="logo"/>
 			<p>
@@ -37,7 +37,7 @@
 				{{ $t('ready.loading') }}
 			</p>
 		</section>
-	</transition>
+	</CustomTransition>
 </template>
 
 <script lang="ts" setup>
@@ -47,6 +47,7 @@ import {useRouter, useRoute} from 'vue-router'
 import Logo from '@/assets/logo.svg?component'
 import ApiConfig from '@/components/misc/api-config.vue'
 import Message from '@/components/misc/message.vue'
+import CustomTransition from '@/components/misc/CustomTransition.vue'
 import NoAuthWrapper from '@/components/misc/no-auth-wrapper.vue'
 
 import {ERROR_NO_API_URL} from '@/helpers/checkAndSetApiUrl'