refactor: pagination/date-separated-list系処理を良い感じに？

packages/frontend/src/components/MkDateSeparatedList.vue

@@ -3,11 +3,12 @@ import { defineComponent, h, PropType, TransitionGroup } from 'vue';
 import MkAd from '@/components/global/MkAd.vue';
 import { i18n } from '@/i18n';
 import { defaultStore } from '@/store';
+import { MisskeyEntity } from '@/types/date-separated-list';
 
 export default defineComponent({
 	props: {
 		items: {
-			type: Array as PropType<{ id: string; createdAt: string; _shouldInsertAd_: boolean; }[]>,
+			type: Array as PropType<MisskeyEntity[]>,
 			required: true,
 		},
 		direction: {
@@ -90,16 +91,30 @@ export default defineComponent({
 			}
 		});
 
+		function onBeforeLeave(el: HTMLElement) {
+			el.style.top = `${el.offsetTop}px`;
+			el.style.left = `${el.offsetLeft}px`;
+		}
+		function onLeaveCanceled(el: HTMLElement) {
+			el.style.top = '';
+			el.style.left = '';
+		}
+
 		return () => h(
 			defaultStore.state.animation ? TransitionGroup : 'div',
-			defaultStore.state.animation ? {
-				class: 'sqadhkmv' + (props.noGap ? ' noGap' : ''),
-				name: 'list',
-				tag: 'div',
-				'data-direction': props.direction,
-				'data-reversed': props.reversed ? 'true' : 'false',
-			} : {
-				class: 'sqadhkmv' + (props.noGap ? ' noGap' : ''),
+			{
+					class: {
+						'sqadhkmv': true,
+						'noGap': props.noGap
+					},
+					'data-direction': props.direction,
+					'data-reversed': props.reversed ? 'true' : 'false',
+					...(defaultStore.state.animation ? {
+						name: 'list',
+						tag: 'div',
+						onBeforeLeave,
+						onLeaveCanceled,
+					} : {}),
 			},
 			{ default: renderChildren });
 	},
@@ -108,6 +123,7 @@ export default defineComponent({
 
 <style lang="scss">
 .sqadhkmv {
+	display: flex;
 	container-type: inline-size;
 
 	> *:empty {
@@ -122,24 +138,46 @@ export default defineComponent({
 		transition: transform 0.7s cubic-bezier(0.23, 1, 0.32, 1);
 	}
 
+	&.deny-move-transition > .list-move {
+		transition: none !important;
+	}
+
+	> .list-leave-active,
 	> .list-enter-active {
 		transition: transform 0.7s cubic-bezier(0.23, 1, 0.32, 1), opacity 0.7s cubic-bezier(0.23, 1, 0.32, 1);
 	}
 
+	> .list-leave-from,
+	> .list-leave-to,
+	> .list-leave-active {
+		transition: transform 0.7s cubic-bezier(0.23, 1, 0.32, 1), opacity 0.7s cubic-bezier(0.23, 1, 0.32, 1);
+		position: absolute !important;
+	}
+
 	&[data-direction="up"] {
-		> .list-enter-from {
+		> .list-enter-from,
+		> .list-leave-to {
 			opacity: 0;
 			transform: translateY(64px);
 		}
 	}
 
 	&[data-direction="down"] {
-		> .list-enter-from {
+		> .list-enter-from,
+		> .list-leave-to {
 			opacity: 0;
 			transform: translateY(-64px);
 		}
 	}
 
+	&[data-reversed="true"] {
+		flex-direction: column-reverse;
+	}
+
+	&[data-reversed="false"] {
+		flex-direction: column;
+	}
+
 	> .separator {
 		text-align: center;
 

packages/frontend/src/components/MkNotes.vue

@@ -9,7 +9,16 @@
 
 	<template #default="{ items: notes }">
 		<div class="giivymft" :class="{ noGap }">
-			<XList ref="notes" v-slot="{ item: note }" :items="notes" :direction="pagination.reversed ? 'up' : 'down'" :reversed="pagination.reversed" :no-gap="noGap" :ad="true" class="notes">
+			<XList
+				ref="notes"
+				v-slot="{ item: note }"
+				:items="notes"
+				:direction="pagination.reversed ? 'up' : 'down'"
+				:reversed="pagination.reversed"
+				:no-gap="noGap"
+				:ad="true"
+				class="notes"
+			>
 				<XNote :key="note._featuredId_ || note._prId_ || note.id" class="qtqtichx" :note="note"/>
 			</XList>
 		</div>