feat: use transition component everywhere

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.