feat: move transition in component (#2694)

Reviewed-on: https://kolaente.dev/vikunja/frontend/pulls/2694
Reviewed-by: konrad <k@knt.li>

src/components/date/datepickerWithRange.vue

@@ -54,8 +54,8 @@
 						</p>
 
 						<modal
-							@close="() => showHowItWorks = false"
 							:enabled="showHowItWorks"
+							@close="() => showHowItWorks = false"
 							transition-name="fade"
 							:overflow="true"
 							variant="hint-modal"

src/components/home/contentAuth.vue

@@ -39,7 +39,7 @@
 				</router-view>
 
 				<modal
-					v-if="currentModal"
+					:enabled="Boolean(currentModal)"
 					@close="closeModal()"
 					variant="scrolling"
 					class="task-detail-view-modal"
@@ -237,6 +237,4 @@ labelStore.loadAllLabels()
 .content-auth.z-unset {
 	z-index: unset;
 }
-
-@include modal-transition();
 </style>

src/components/input/datepicker.vue

@@ -4,7 +4,7 @@
 			{{ date === null ? chooseDateLabel : formatDateShort(date) }}
 		</BaseButton>
 
-		<transition name="fade">
+		<CustomTransition name="fade">
 			<div v-if="show" class="datepicker-popup" ref="datepickerPopup">
 
 				<BaseButton
@@ -84,7 +84,7 @@
 					{{ $t('misc.confirm') }}
 				</x-button>
 			</div>
-		</transition>
+		</CustomTransition>
 	</div>
 </template>
 
@@ -94,6 +94,7 @@ import flatPickr from 'vue-flatpickr-component'
 import 'flatpickr/dist/flatpickr.css'
 
 import BaseButton from '@/components/base/BaseButton.vue'
+import CustomTransition from '@/components/misc/CustomTransition.vue'
 
 import {formatDate, formatDateShort} from '@/helpers/time/formatDate'
 import {calculateDayInterval} from '@/helpers/time/calculateDayInterval'

src/components/input/multiselect.vue

@@ -36,7 +36,7 @@
 			</div>
 		</div>
 
-		<transition name="fade">
+		<CustomTransition name="fade">
 			<div class="search-results" :class="{'search-results-inline': inline}" v-if="searchResultsVisible">
 				<BaseButton
 					class="search-result-button is-fullwidth"
@@ -78,8 +78,7 @@
 					</span>
 				</BaseButton>
 			</div>
-		</transition>
-
+		</CustomTransition>
 	</div>
 </template>
 
@@ -90,6 +89,7 @@ import {useI18n} from 'vue-i18n'
 import {closeWhenClickedOutside} from '@/helpers/closeWhenClickedOutside'
 
 import BaseButton from '@/components/base/BaseButton.vue'
+import CustomTransition from '@/components/misc/CustomTransition.vue'
 
 function elementInResults(elem: string | any, label: string, query: string): boolean {
 	// Don't make create available if we have an exact match in our search results.

src/components/list/ListWrapper.vue

@@ -44,11 +44,11 @@
 			</div>
 			<slot name="header" />
 		</div>
-		<transition name="fade">
+		<CustomTransition name="fade">
 			<Message variant="warning" v-if="currentList.isArchived" class="mb-4">
 				{{ $t('list.archived') }}
 			</Message>
-		</transition>
+		</CustomTransition>
 
 		<slot v-if="loadedListId"/>
 	</div>
@@ -60,6 +60,7 @@ import {useRoute} from 'vue-router'
 
 import BaseButton from '@/components/base/BaseButton.vue'
 import Message from '@/components/misc/message.vue'
+import CustomTransition from '@/components/misc/CustomTransition.vue'
 
 import ListModel from '@/models/list'
 import ListService from '@/services/list'

src/components/list/partials/filter-popup.vue

@@ -14,11 +14,11 @@
 		{{ $t('filters.title') }}
 	</x-button>
 	<modal
-		@close="() => modalOpen = false"
 		:enabled="modalOpen"
 		transition-name="fade"
 		:overflow="true"
 		variant="hint-modal"
+		@close="() => modalOpen = false"
 	>
 		<filters
 			:has-title="true"

src/components/misc/CustomTransition.vue

@@ -0,0 +1,67 @@
+<template>
+	<transition :name="name">
+		<slot  />
+	</transition>
+</template>
+
+<script setup lang="ts">
+defineProps<{
+	name: 'flash-background' | 'fade' | 'width' | 'modal'
+}>()
+</script>
+
+<style scoped lang="scss">
+$flash-background-duration: 750ms;
+
+.flash-background-enter-from,
+.flash-background-enter-active {
+  animation: flash-background $flash-background-duration ease 1;
+}
+
+@keyframes flash-background {
+  0% {
+    background: var(--primary-light);
+  }
+  100% {
+    background: transparent;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+	@keyframes flash-background {
+		0% {
+			background: transparent;
+		}
+	}
+}
+
+.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'

src/components/notifications/notifications.vue

@@ -7,7 +7,7 @@
 			</BaseButton>
 		</div>
 
-		<transition name="fade">
+		<CustomTransition name="fade">
 			<div class="notifications-list" v-if="showNotifications" ref="popup">
 				<span class="head">{{ $t('notification.title') }}</span>
 				<div
@@ -42,7 +42,7 @@
 					</span>
 				</p>
 			</div>
-		</transition>
+		</CustomTransition>
 	</div>
 </template>
 
@@ -52,6 +52,7 @@ import {useRouter} from 'vue-router'
 
 import NotificationService from '@/services/notification'
 import BaseButton from '@/components/base/BaseButton.vue'
+import CustomTransition from '@/components/misc/CustomTransition.vue'
 import User from '@/components/misc/user.vue'
 import { NOTIFICATION_NAMES as names, type INotification} from '@/modelTypes/INotification'
 import {closeWhenClickedOutside} from '@/helpers/closeWhenClickedOutside'

src/components/quick-actions/quick-actions.vue

@@ -1,5 +1,5 @@
 <template>
-	<modal v-if="active" @close="closeQuickActions" :overflow="isNewTaskCommand">
+	<modal :enabled="active" @close="closeQuickActions" :overflow="isNewTaskCommand">
 		<div class="card quick-actions">
 			<div class="action-input" :class="{'has-active-cmd': selectedCmd !== null}">
 				<div class="active-cmd tag" v-if="selectedCmd !== null">

src/components/sharing/linkSharing.vue

@@ -169,21 +169,19 @@
 			</table>
 		</div>
 
-		<transition name="modal">
-			<modal
-				@close="showDeleteModal = false"
-				@submit="remove(listId)"
-				v-if="showDeleteModal"
-			>
-				<template #header>
-					<span>{{ $t('list.share.links.remove') }}</span>
-				</template>
+		<modal
+			:enabled="showDeleteModal"
+			@close="showDeleteModal = false"
+			@submit="remove(listId)"
+		>
+			<template #header>
+				<span>{{ $t('list.share.links.remove') }}</span>
+			</template>
 
-				<template #text>
-					<p>{{ $t('list.share.links.removeText') }}</p>
-				</template>
-			</modal>
-		</transition>
+			<template #text>
+				<p>{{ $t('list.share.links.removeText') }}</p>
+			</template>
+		</modal>
 	</div>
 </template>
 
@@ -297,6 +295,4 @@ function getShareLink(hash: string, view: ListView = LIST_VIEWS.LIST) {
 .sharables-list:not(.card-content) {
 	overflow-y: auto
 }
-
-@include modal-transition();
 </style>

src/components/sharing/userTeam.vue

@@ -113,22 +113,20 @@
 			{{ $t('list.share.userTeam.notShared', {type: shareTypeNames}) }}
 		</nothing>
 
-		<transition name="modal">
-			<modal
-				@close="showDeleteModal = false"
-				@submit="deleteSharable()"
-				v-if="showDeleteModal"
-			>
-				<template #header>
-					<span>{{
-							$t('list.share.userTeam.removeHeader', {type: shareTypeName, sharable: sharableName})
-						}}</span>
-				</template>
-				<template #text>
-					<p>{{ $t('list.share.userTeam.removeText', {type: shareTypeName, sharable: sharableName}) }}</p>
-				</template>
-			</modal>
-		</transition>
+		<modal
+			:enabled="showDeleteModal"
+			@close="showDeleteModal = false"
+			@submit="deleteSharable()"
+		>
+			<template #header>
+				<span>{{
+						$t('list.share.userTeam.removeHeader', {type: shareTypeName, sharable: sharableName})
+					}}</span>
+			</template>
+			<template #text>
+				<p>{{ $t('list.share.userTeam.removeText', {type: shareTypeName, sharable: sharableName}) }}</p>
+			</template>
+		</modal>
 	</div>
 </template>
 
@@ -382,7 +380,3 @@ async function find(query: string) {
 		})
 }
 </script>
-
-<style lang="scss" scoped>
-@include modal-transition();
-</style>

src/components/tasks/TaskForm.vue

@@ -3,7 +3,7 @@
 		@submit.prevent="createTask"
 		class="add-new-task"
 	>
-		<transition name="width">
+		<CustomTransition name="width">
 			<input
 				v-if="newTaskFieldActive"
 				v-model="newTaskTitle"
@@ -13,7 +13,7 @@
 				ref="newTaskTitleField"
 				type="text"
 			/>
-		</transition>
+		</CustomTransition>
 		<x-button @click="showCreateTaskOrCreate" :shadow="false" icon="plus">
 			{{ $t('task.new') }}
 		</x-button>
@@ -24,6 +24,8 @@
 import {nextTick, ref} from 'vue'
 import type {ITask} from '@/modelTypes/ITask'
 
+import CustomTransition from '@/components/misc/CustomTransition.vue'
+
 const emit = defineEmits<{
 	(e: 'create-task', title: string): Promise<ITask>
 }>()

src/components/tasks/partials/attachments.vue

@@ -130,7 +130,7 @@
 
 		<!-- Delete modal -->
 		<modal
-			v-if="attachmentToDelete !== null"
+			:enabled="attachmentToDelete !== null"
 			@close="setAttachmentToDelete(null)"
 			@submit="deleteAttachment()"
 		>
@@ -148,7 +148,7 @@
 
 		<!-- Attachment image modal -->
 		<modal
-			v-if="attachmentImageBlobUrl !== null"
+			:enabled="attachmentImageBlobUrl !== null"
 			@close="attachmentImageBlobUrl = null"
 		>
 			<img :src="attachmentImageBlobUrl" alt=""/>
@@ -432,6 +432,4 @@ async function setCoverImage(attachment: IAttachment | null) {
 	border-radius: 4px;
 	font-size: .75rem;
 }
-
-@include modal-transition();
 </style>

src/components/tasks/partials/checklist-summary.vue

@@ -49,14 +49,12 @@ const label = computed(() => {
 	align-items: center;
 	padding-left: .5rem;
 	font-size: .9rem;
-
 }
 
 svg {
 	transform: rotate(-90deg);
 	transition: stroke-dashoffset 0.35s;
 	margin-right: .25rem;
-
 }
 
 circle {

src/components/tasks/partials/comments.vue

@@ -43,7 +43,7 @@
 						>
 							· {{ $t('task.comment.edited', {date: formatDateSince(c.updated)}) }}
 						</span>
-						<transition name="fade">
+						<CustomTransition name="fade">
 							<span
 								class="is-inline-flex"
 								v-if="
@@ -63,7 +63,7 @@
 							>
 								{{ $t('misc.saved') }}
 							</span>
-						</transition>
+						</CustomTransition>
 					</div>
 					<editor
 						:hasPreview="true"
@@ -94,15 +94,15 @@
 				</figure>
 				<div class="media-content">
 					<div class="form">
-						<transition name="fade">
+						<CustomTransition name="fade">
 							<span
-								class="is-inline-flex"
 								v-if="taskCommentService.loading && creating"
+								class="is-inline-flex"
 							>
 								<span class="loader is-inline-block mr-2"></span>
 								{{ $t('task.comment.creating') }}
 							</span>
-						</transition>
+						</CustomTransition>
 						<div class="field">
 							<editor
 								:class="{
@@ -132,22 +132,20 @@
 			</div>
 		</div>
 
-		<transition name="modal">
-			<modal
-				v-if="showDeleteModal"
-				@close="showDeleteModal = false"
-				@submit="() => deleteComment(commentToDelete)"
-			>
-				<template #header><span>{{ $t('task.comment.delete') }}</span></template>
+		<modal
+			:enabled="showDeleteModal"
+			@close="showDeleteModal = false"
+			@submit="() => deleteComment(commentToDelete)"
+		>
+			<template #header><span>{{ $t('task.comment.delete') }}</span></template>
 
-				<template #text>
-					<p>
-						{{ $t('task.comment.deleteText1') }}<br/>
-						<strong class="has-text-white">{{ $t('misc.cannotBeUndone') }}</strong>
-					</p>
-				</template>
-			</modal>
-		</transition>
+			<template #text>
+				<p>
+					{{ $t('task.comment.deleteText1') }}<br/>
+					<strong class="has-text-white">{{ $t('misc.cannotBeUndone') }}</strong>
+				</p>
+			</template>
+		</modal>
 	</div>
 </template>
 
@@ -155,6 +153,7 @@
 import {ref, reactive, computed, shallowReactive, watch, nextTick} from 'vue'
 import {useI18n} from 'vue-i18n'
 
+import CustomTransition from '@/components/misc/CustomTransition.vue'
 import Editor from '@/components/input/AsyncEditor'
 
 import TaskCommentService from '@/services/taskComment'
@@ -351,6 +350,4 @@ async function deleteComment(commentToDelete: ITaskComment) {
 .media-content {
 	width: calc(100% - 48px - 2rem);
 }
-
-@include modal-transition();
 </style>

src/components/tasks/partials/description.vue

@@ -5,7 +5,7 @@
 				<icon icon="align-left"/>
 			</span>
 			{{ $t('task.attributes.description') }}
-			<transition name="fade">
+			<CustomTransition name="fade">
 				<span class="is-small is-inline-flex" v-if="loading && saving">
 					<span class="loader is-inline-block mr-2"></span>
 					{{ $t('misc.saving') }}
@@ -14,7 +14,7 @@
 					<icon icon="check"/>
 					{{ $t('misc.saved') }}
 				</span>
-			</transition>
+			</CustomTransition>
 		</h3>
 		<editor
 			:is-edit-enabled="canWrite"
@@ -33,6 +33,7 @@
 <script setup lang="ts">
 import {ref,computed, watch, type PropType} from 'vue'
 
+import CustomTransition from '@/components/misc/CustomTransition.vue'
 import Editor from '@/components/input/AsyncEditor'
 
 import type {ITask} from '@/modelTypes/ITask'

src/components/tasks/partials/heading.vue

@@ -17,7 +17,7 @@
 		>
 			{{ task.title.trim() }}
 		</h1>
-		<transition name="fade">
+		<CustomTransition name="fade">
 			<span
 				v-if="loading && saving"
 				class="is-inline-flex is-align-items-center"
@@ -32,7 +32,7 @@
 				<icon icon="check" class="mr-2"/>
 				{{ $t('misc.saved') }}
 			</span>
-		</transition>
+		</CustomTransition>
 	</div>
 </template>
 
@@ -41,6 +41,7 @@ import {ref, computed, type PropType} from 'vue'
 import {useRouter} from 'vue-router'
 
 import BaseButton from '@/components/base/BaseButton.vue'
+import CustomTransition from '@/components/misc/CustomTransition.vue'
 import ColorBubble from '@/components/misc/colorBubble.vue'
 import Done from '@/components/misc/Done.vue'
 

src/components/tasks/partials/quick-add-magic.vue

@@ -5,8 +5,8 @@
 			<ButtonLink @click="() => visible = true">{{ $t('task.quickAddMagic.what') }}</ButtonLink>
 		</p>
 		<modal
-			@close="() => visible = false"
 			:enabled="visible"
+			@close="() => visible = false"
 			transition-name="fade"
 			:overflow="true"
 			variant="hint-modal"

src/components/tasks/partials/relatedTasks.vue

@@ -14,7 +14,7 @@
 			<template v-if="editEnabled && showCreate">
 				<label class="label" key="label">
 					{{ $t('task.relation.new') }}
-					<transition name="fade">
+					<CustomTransition name="fade">
 						<span class="is-inline-flex" v-if="taskRelationService.loading">
 							<span class="loader is-inline-block mr-2"></span>
 							{{ $t('misc.saving') }}
@@ -22,7 +22,7 @@
 						<span class="has-text-success" v-else-if="!taskRelationService.loading && saved">
 							{{ $t('misc.saved') }}
 						</span>
-					</transition>
+					</CustomTransition>
 				</label>
 				<div class="field" key="field-search">
 					<Multiselect
@@ -133,7 +133,7 @@
 		</p>
 
 		<modal
-			v-if="relationToDelete !== undefined"
+			:enabled="relationToDelete !== undefined"
 			@close="relationToDelete = undefined"
 			@submit="removeTaskRelation()"
 		>
@@ -163,6 +163,7 @@ import {RELATION_KINDS, RELATION_KIND, type IRelationKind} from '@/types/IRelati
 import TaskRelationService from '@/services/taskRelation'
 import TaskRelationModel from '@/models/taskRelation'
 
+import CustomTransition from '@/components/misc/CustomTransition.vue'
 import BaseButton from '@/components/base/BaseButton.vue'
 import Multiselect from '@/components/input/multiselect.vue'
 import Fancycheckbox from '@/components/input/fancycheckbox.vue'
@@ -442,6 +443,4 @@ async function toggleTaskDone(task: ITask) {
 	padding: 0;
 	height: 18px; // The exact height of the checkbox in the container
 }
-
-@include modal-transition();
 </style>

src/components/tasks/partials/singleTaskInList.vue

@@ -74,9 +74,9 @@
 					- {{ $t('task.detail.due', {at: formatDateSince(task.dueDate)}) }}
 				</time>
 			</BaseButton>
-			<transition name="fade">
+			<CustomTransition name="fade">
 				<defer-task v-if="+new Date(task.dueDate) > 0 && showDefer" v-model="task" ref="deferDueDate"/>
-			</transition>
+			</CustomTransition>
 
 			<priority-label :priority="task.priority" :done="task.done"/>
 
@@ -140,6 +140,7 @@ import User from '@/components/misc/user.vue'
 import BaseButton from '@/components/base/BaseButton.vue'
 import Fancycheckbox from '@/components/input/fancycheckbox.vue'
 import ColorBubble from '@/components/misc/colorBubble.vue'
+import CustomTransition from '@/components/misc/CustomTransition.vue'
 
 import TaskService from '@/services/task'
 

src/styles/common-imports.scss

@@ -16,8 +16,6 @@
 // since $tablet is defined by bulma we can just define it after importing the utilities
 $mobile: math.div($tablet, 2);
 
-@import "mixins";
-
 $family-sans-serif: 'Open Sans', Helvetica, Arial, sans-serif;
 $vikunja-font: 'Quicksand', sans-serif;
 

src/styles/components/task.scss

@@ -2,16 +2,3 @@
 .link-share-container:not(.has-background) .task-view {
   background: transparent;
 }
-
-// FIXME: should be a prop of TaskDetailView.vue
-.modal-container .task-view {
-  border-radius: $radius;
-  padding: 1rem;
-  color: var(--text);
-  background-color: var(--site-background) !important;
-
-  @media screen and (max-width: 800px) {
-    border-radius: 0;
-    padding-top: 2rem;
-  }
-}

src/styles/mixins.scss

@@ -1,12 +0,0 @@
-/* Transitions */
-@mixin modal-transition() {
-	.modal-enter,
-	.modal-leave-active {
-		opacity: 0;
-	}
-
-	.modal-enter .modal-container,
-	.modal-leave-active .modal-container {
-		transform: scale(0.9);
-	}
-}

src/views/labels/ListLabels.vue

@@ -94,9 +94,9 @@
 			</div>
 
 			<modal
+				:enabled="showDeleteModal"
 				@close="showDeleteModal = false"
 				@submit="deleteLabel(labelToDelete)"
-				v-if="showDeleteModal"
 			>
 				<template #header><span>{{ $t('task.label.delete.header') }}</span></template>
 

src/views/list/ListKanban.vue

@@ -206,20 +206,18 @@
 			</div>
 		</div>
 
-		<transition name="modal">
-			<modal
-				v-if="showBucketDeleteModal"
-				@close="showBucketDeleteModal = false"
-				@submit="deleteBucket()"
-			>
-				<template #header><span>{{ $t('list.kanban.deleteHeaderBucket') }}</span></template>
+		<modal
+			:enabled="showBucketDeleteModal"
+			@close="showBucketDeleteModal = false"
+			@submit="deleteBucket()"
+		>
+			<template #header><span>{{ $t('list.kanban.deleteHeaderBucket') }}</span></template>
 
-				<template #text>
-					<p>{{ $t('list.kanban.deleteBucketText1') }}<br/>
-						{{ $t('list.kanban.deleteBucketText2') }}</p>
-				</template>
-			</modal>
-		</transition>
+			<template #text>
+				<p>{{ $t('list.kanban.deleteBucketText1') }}<br/>
+					{{ $t('list.kanban.deleteBucketText2') }}</p>
+			</template>
+		</modal>
 		</div>
 		</template>
 	</ListWrapper>
@@ -792,6 +790,4 @@ $filter-container-height: '1rem - #{$switch-view-height}';
 .move-card-leave-active {
 	display: none;
 }
-
-@include modal-transition();
 </style>

src/views/list/settings/background.vue

@@ -43,7 +43,7 @@
 					:key="im.id"
 					:style="{'background-image': `url(${backgroundBlurHashes[im.id]})`}"
 				>
-					<transition name="fade">
+					<CustomTransition name="fade">
 						<BaseButton
 							v-if="backgroundThumbs[im.id]"
 							class="image-search__image-button"
@@ -51,7 +51,7 @@
 						>
 							<img class="image-search__image" :src="backgroundThumbs[im.id]" alt="" />
 						</BaseButton>
-					</transition>
+					</CustomTransition>
 
 					<BaseButton
 						:href="`https://unsplash.com/@${im.info.author}`"
@@ -102,7 +102,9 @@ import {ref, computed, shallowReactive} from 'vue'
 import {useI18n} from 'vue-i18n'
 import {useRoute, useRouter} from 'vue-router'
 import debounce from 'lodash.debounce'
+
 import BaseButton from '@/components/base/BaseButton.vue'
+import CustomTransition from '@/components/misc/CustomTransition.vue'
 
 import {useBaseStore} from '@/stores/base'
 import {useListStore} from '@/stores/lists'

src/views/tasks/TaskDetailView.vue

@@ -2,8 +2,7 @@
 	<div
 		class="loader-container task-view-container"
 		:class="{
-			'is-loading': taskService.loading,
-			'visible': visible,
+			'is-loading': taskService.loading || !visible,
 			'is-modal': isModal,
 		}"
 	>
@@ -42,7 +41,7 @@
 								v-model="task.assignees"
 							/>
 						</div>
-						<transition name="flash-background" appear>
+						<CustomTransition name="flash-background" appear>
 							<div class="column" v-if="activeFields.priority">
 								<!-- Priority -->
 								<div class="detail-title">
@@ -55,8 +54,8 @@
 									:ref="e => setFieldRef('priority', e)"
 									v-model="task.priority"/>
 							</div>
-						</transition>
-						<transition name="flash-background" appear>
+						</CustomTransition>
+						<CustomTransition name="flash-background" appear>
 							<div class="column" v-if="activeFields.dueDate">
 								<!-- Due Date -->
 								<div class="detail-title">
@@ -81,8 +80,8 @@
 									</BaseButton>
 								</div>
 							</div>
-						</transition>
-						<transition name="flash-background" appear>
+						</CustomTransition>
+						<CustomTransition name="flash-background" appear>
 							<div class="column" v-if="activeFields.percentDone">
 								<!-- Progress -->
 								<div class="detail-title">
@@ -95,8 +94,8 @@
 									:ref="e => setFieldRef('percentDone', e)"
 									v-model="task.percentDone"/>
 							</div>
-						</transition>
-						<transition name="flash-background" appear>
+						</CustomTransition>
+						<CustomTransition name="flash-background" appear>
 							<div class="column" v-if="activeFields.startDate">
 								<!-- Start Date -->
 								<div class="detail-title">
@@ -122,8 +121,8 @@
 									</BaseButton>
 								</div>
 							</div>
-						</transition>
-						<transition name="flash-background" appear>
+						</CustomTransition>
+						<CustomTransition name="flash-background" appear>
 							<div class="column" v-if="activeFields.endDate">
 								<!-- End Date -->
 								<div class="detail-title">
@@ -148,8 +147,8 @@
 									</BaseButton>
 								</div>
 							</div>
-						</transition>
-						<transition name="flash-background" appear>
+						</CustomTransition>
+						<CustomTransition name="flash-background" appear>
 							<div class="column" v-if="activeFields.reminders">
 								<!-- Reminders -->
 								<div class="detail-title">
@@ -163,8 +162,8 @@
 									@update:model-value="saveTask"
 								/>
 							</div>
-						</transition>
-						<transition name="flash-background" appear>
+						</CustomTransition>
+						<CustomTransition name="flash-background" appear>
 							<div class="column" v-if="activeFields.repeatAfter">
 								<!-- Repeat after -->
 								<div class="is-flex is-justify-content-space-between">
@@ -191,8 +190,8 @@
 									}"
 								/>
 							</div>
-						</transition>
-						<transition name="flash-background" appear>
+						</CustomTransition>
+						<CustomTransition name="flash-background" appear>
 							<div class="column" v-if="activeFields.color">
 								<!-- Color -->
 								<div class="detail-title">
@@ -206,7 +205,7 @@
 									@update:model-value="saveTask"
 								/>
 							</div>
-						</transition>
+						</CustomTransition>
 					</div>
 
 					<!-- Labels -->
@@ -431,9 +430,9 @@
 		</div>
 
 		<modal
+			:enabled="showDeleteModal"
 			@close="showDeleteModal = false"
 			@submit="deleteTask()"
-			v-if="showDeleteModal"
 		>
 			<template #header><span>{{ $t('task.detail.delete.header') }}</span></template>
 
@@ -481,6 +480,7 @@ import RelatedTasks from '@/components/tasks/partials/relatedTasks.vue'
 import Reminders from '@/components/tasks/partials/reminders.vue'
 import RepeatAfter from '@/components/tasks/partials/repeatAfter.vue'
 import TaskSubscription from '@/components/misc/subscription.vue'
+import CustomTransition from '@/components/misc/CustomTransition.vue'
 
 import {uploadFile} from '@/helpers/attachments'
 import {getNamespaceTitle} from '@/helpers/getNamespaceTitle'
@@ -799,244 +799,217 @@ async function setPercentDone(percentDone: number) {
 </script>
 
 <style lang="scss" scoped>
-$flash-background-duration: 750ms;
+.task-view-container {
+	// simulate sass lighten($primary, 30) by increasing lightness 30% to 73%
+	--primary-light: hsla(var(--primary-h), var(--primary-s), 73%, var(--primary-a));
+	padding-bottom: 0;
+	
+  @media screen and (min-width: $desktop) {
+		padding-bottom: 1rem;
+  }
+}
 
 .task-view {
-  padding: 1rem;
+	padding: 1rem;
+	padding-bottom: 0;
   background-color: var(--site-background);
 	
-  @media screen and (max-width: $desktop) {
-    padding-bottom: 0;
+  @media screen and (min-width: $desktop) {
+		padding: 1rem;
   }
 }
 
-  .subtitle {
-    color: var(--grey-500);
-    margin-bottom: 1rem;
+.is-modal .task-view {
+  border-radius: $radius;
+  padding: 1rem;
+  color: var(--text);
+  background-color: var(--site-background) !important;
 
-    a {
-      color: var(--grey-800);
-    }
+  @media screen and (max-width: 800px) {
+    border-radius: 0;
+    padding-top: 2rem;
   }
+}
 
-  h3 .button {
-    vertical-align: middle;
-  }
+.task-view * {
+	transition: opacity 50ms ease;
+}
 
-  .icon.is-grey {
-    color: var(--grey-400);
-  }
+.is-loading .task-view * {
+	opacity: 0;
+}
 
 
+.subtitle {
+	color: var(--grey-500);
+	margin-bottom: 1rem;
 
-  .date-input {
-    display: flex;
-    align-items: center;
-  }
+	a {
+		color: var(--grey-800);
+	}
+}
 
-  .remove {
-	color: var(--danger);
+h3 .button {
 	vertical-align: middle;
-	padding-left: .5rem;
-	line-height: 1;
-  }
+}
 
-  :deep(.datepicker) {
-    width: 100%;
+.icon.is-grey {
+	color: var(--grey-400);
+}
+.date-input {
+	display: flex;
+	align-items: center;
+}
 
-    .show {
-      color: var(--text);
-      padding: .25rem .5rem;
-      transition: background-color $transition;
-      border-radius: $radius;
-      display: block;
-      margin: .1rem 0;
-      width: 100%;
-      text-align: left;
+.remove {
+color: var(--danger);
+vertical-align: middle;
+padding-left: .5rem;
+line-height: 1;
+}
 
-      &:hover {
-        background: var(--white);
-      }
-    }
+:deep(.datepicker) {
+	width: 100%;
 
-    &.disabled .show:hover {
-      background: transparent;
-    }
-  }
+	.show {
+		color: var(--text);
+		padding: .25rem .5rem;
+		transition: background-color $transition;
+		border-radius: $radius;
+		display: block;
+		margin: .1rem 0;
+		width: 100%;
+		text-align: left;
 
-  .details {
-    padding-bottom: 0.75rem;
-    flex-flow: row wrap;
-    margin-bottom: 0;
-
-    .detail-title {
-      display: block;
-      color: var(--grey-400);
-    }
-
-    .none {
-      font-style: italic;
-    }
-
-    // Break after the 2nd element
-    .column:nth-child(2n) {
-      page-break-after: always; // CSS 2.1 syntax
-      break-after: always; // New syntax
-    }
-
-    &.labels-list,
-    .assignees {
-      :deep(.multiselect) {
-        .input-wrapper {
-          &:not(:focus-within):not(:hover) {
-            background: transparent;
-            border-color: transparent;
-          }
-        }
-      }
-    }
-  }
-
-  :deep(.details),
-  :deep(.heading) {
-    .input:not(.has-defaults),
-    .textarea,
-    .select:not(.has-defaults) select {
-      cursor: pointer;
-      transition: all $transition-duration;
-
-      &::placeholder {
-        color: var(--text-light);
-        opacity: 1;
-        font-style: italic;
-      }
-
-      &:not(:disabled) {
-        &:hover,
-        &:active,
-        &:focus {
-          background: var(--scheme-main);
-          border-color: var(--border);
-          cursor: text;
-        }
-
-        &:hover,
-        &:active {
-          cursor: text;
-          border-color: var(--link)
-        }
-      }
-    }
-
-    .select:not(.has-defaults):after {
-      opacity: 0;
-    }
-
-    .select:not(.has-defaults):hover:after {
-      opacity: 1;
-    }
-  }
-
-  .attachments {
-    margin-bottom: 0;
-
-    table tr:last-child td {
-      border-bottom: none;
-    }
-  }
-
-  .action-buttons {
-    @media screen and (min-width: $tablet) {
-      position: sticky;
-      top: $navbar-height + 1.5rem;
-      align-self: flex-start;
-    }
-		
-    .button {
-      width: 100%;
-      margin-bottom: .5rem;
-      justify-content: left; 
-
-      &.has-light-text {
-		color: var(--white);
-      }
-    }
-  }
-
-	.is-modal .action-buttons {
-		// we need same top margin for the modal close button 
-		@media screen and (min-width: $tablet) {
-			top: 6.5rem;
-		}
-		// this is the moment when the fixed close button is outside the modal
-		// => we can fill up the space again
-		@media screen and (min-width: calc(#{$desktop} + 84px)) {
-			top: 0;
+		&:hover {
+			background: var(--white);
 		}
 	}
 
-  .checklist-summary {
-    padding-left: .25rem;
-  }
-
-
-.task-view-container {
-  padding-bottom: 1rem;
-
-  @media screen and (max-width: $desktop) {
-    padding-bottom: 0;
-  }
-
-  .task-view * {
-    opacity: 0;
-    transition: opacity 50ms ease;
-  }
-
-  &.is-loading {
-    opacity: 1;
-
-    .task-view * {
-      opacity: 0;
-    }
-  }
-
-  &.visible:not(.is-loading) .task-view * {
-    opacity: 1;
-  }
+	&.disabled .show:hover {
+		background: transparent;
+	}
 }
 
-.task-view-container {
-  // simulate sass lighten($primary, 30) by increasing lightness 30% to 73%
-  --primary-light: hsla(var(--primary-h), var(--primary-s), 73%, var(--primary-a));
+.details {
+	padding-bottom: 0.75rem;
+	flex-flow: row wrap;
+	margin-bottom: 0;
+
+	.detail-title {
+		display: block;
+		color: var(--grey-400);
+	}
+
+	.none {
+		font-style: italic;
+	}
+
+	// Break after the 2nd element
+	.column:nth-child(2n) {
+		page-break-after: always; // CSS 2.1 syntax
+		break-after: always; // New syntax
+	}
+
 }
 
-.flash-background-enter-from,
-.flash-background-enter-active {
-  animation: flash-background $flash-background-duration ease 1;
-}
-
-@keyframes flash-background {
-  0% {
-    background: var(--primary-light);
-  }
-  100% {
-    background: transparent;
-  }
-}
-
-@media (prefers-reduced-motion: reduce) {
-	@keyframes flash-background {
-		0% {
-			background: transparent;
+.details.labels-list,
+.assignees {
+	:deep(.multiselect) {
+		.input-wrapper {
+			&:not(:focus-within):not(:hover) {
+				background: transparent;
+				border-color: transparent;
+			}
 		}
 	}
 }
 
-@include modal-transition();
+:deep(.details),
+:deep(.heading) {
+	.input:not(.has-defaults),
+	.textarea,
+	.select:not(.has-defaults) select {
+		cursor: pointer;
+		transition: all $transition-duration;
+
+		&::placeholder {
+			color: var(--text-light);
+			opacity: 1;
+			font-style: italic;
+		}
+
+		&:not(:disabled) {
+			&:hover,
+			&:active,
+			&:focus {
+				background: var(--scheme-main);
+				border-color: var(--border);
+				cursor: text;
+			}
+
+			&:hover,
+			&:active {
+				cursor: text;
+				border-color: var(--link)
+			}
+		}
+	}
+
+	.select:not(.has-defaults):after {
+		opacity: 0;
+	}
+
+	.select:not(.has-defaults):hover:after {
+		opacity: 1;
+	}
+}
+
+.attachments {
+	margin-bottom: 0;
+
+	table tr:last-child td {
+		border-bottom: none;
+	}
+}
+
+.action-buttons {
+	@media screen and (min-width: $tablet) {
+		position: sticky;
+		top: $navbar-height + 1.5rem;
+		align-self: flex-start;
+	}
+	
+	.button {
+		width: 100%;
+		margin-bottom: .5rem;
+		justify-content: left; 
+
+		&.has-light-text {
+			color: var(--white);
+		}
+	}
+}
+
+.is-modal .action-buttons {
+	// we need same top margin for the modal close button 
+	@media screen and (min-width: $tablet) {
+		top: 6.5rem;
+	}
+	// this is the moment when the fixed close button is outside the modal
+	// => we can fill up the space again
+	@media screen and (min-width: calc(#{$desktop} + 84px)) {
+		top: 0;
+	}
+}
+
+.checklist-summary {
+	padding-left: .25rem;
+}
 
 .detail-content {
   @media print {
-	width: 100% !important;
+		width: 100% !important;
   }
 }
 </style>

src/views/teams/EditTeam.vue

@@ -149,35 +149,32 @@
 		</modal>
 
 		<!-- Team delete modal -->
-		<transition name="modal">
-			<modal
-				@close="showDeleteModal = false"
-				@submit="deleteTeam()"
-				v-if="showDeleteModal"
-			>
-				<template #header><span>{{ $t('team.edit.delete.header') }}</span></template>
+		<modal
+			:enabled="showDeleteModal"
+			@close="showDeleteModal = false"
+			@submit="deleteTeam()"
+		>
+			<template #header><span>{{ $t('team.edit.delete.header') }}</span></template>
+
+			<template #text>
+				<p>{{ $t('team.edit.delete.text1') }}<br/>
+					{{ $t('team.edit.delete.text2') }}</p>
+			</template>
+		</modal>
 
-				<template #text>
-					<p>{{ $t('team.edit.delete.text1') }}<br/>
-						{{ $t('team.edit.delete.text2') }}</p>
-				</template>
-			</modal>
-		</transition>
 		<!-- User delete modal -->
-		<transition name="modal">
-			<modal
-				@close="showUserDeleteModal = false"
-				@submit="deleteMember()"
-				v-if="showUserDeleteModal"
-			>
-				<template #header><span>{{ $t('team.edit.deleteUser.header') }}</span></template>
+		<modal
+			:enabled="showUserDeleteModal"
+			@close="showUserDeleteModal = false"
+			@submit="deleteMember()"
+		>
+			<template #header><span>{{ $t('team.edit.deleteUser.header') }}</span></template>
 
-				<template #text>
-					<p>{{ $t('team.edit.deleteUser.text1') }}<br/>
-						{{ $t('team.edit.deleteUser.text2') }}</p>
-				</template>
-			</modal>
-		</transition>
+			<template #text>
+				<p>{{ $t('team.edit.deleteUser.text1') }}<br/>
+					{{ $t('team.edit.deleteUser.text2') }}</p>
+			</template>
+		</modal>
 	</div>
 </template>
 
@@ -339,6 +336,4 @@ async function leave() {
 		padding: 0;
 	}
 }
-
-@include modal-transition();
 </style>