✌️

packages/client/src/components/date-separated-list.vue

@@ -90,6 +90,13 @@ export default defineComponent({
 			}
 		});
 
+		function onBeforeLeave(el: HTMLElement) {
+			el.style.top = `${el.offsetTop}px`;
+		}
+		function onLeaveCanceled(el: HTMLElement) {
+			el.style.top = '';
+		}
+
 		return () => h(
 			defaultStore.state.animation ? TransitionGroup : 'div',
 			defaultStore.state.animation ? {
@@ -101,6 +108,8 @@ export default defineComponent({
 					tag: 'div',
 					'data-direction': props.direction,
 					'data-reversed': props.reversed ? 'true' : 'false',
+					onBeforeLeave,
+					onLeaveCanceled,
 				} : {
 					class: {
 						'sqadhkmv': true,
@@ -124,16 +133,24 @@ export default defineComponent({
 		margin-bottom: var(--margin);
 	}
 
-	&:not(.deny-move-transition) > * {
+	> .list-move {
 		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 {
-		position: absolute;
+		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"] {

packages/client/src/pages/messaging/messaging-room.message.vue

@@ -66,6 +66,7 @@ function del() {
 	position: relative;
 	background-color: transparent;
 	display: flex;
+	width: 100%;
 
 	> .avatar {
 		position: sticky;
@@ -249,6 +250,7 @@ function del() {
 	&.isMe {
 		flex-direction: row-reverse;
 		padding-right: var(--margin);
+		right: var(--margin); // 削除時にposition: absoluteになったときに使う
 
 		> .content {
 			padding-right: 16px;

packages/client/src/pages/messaging/messaging-room.vue

@@ -31,7 +31,7 @@
 				<MkEllipsis/>
 			</div>
 			<transition :name="animation ? 'fade' : ''">
-				<div class="new-message" v-if="showIndicator">
+				<div class="new-message" v-show="showIndicator">
 					<button class="_buttonPrimary" @click="onIndicatorClick"><i class="fas fa-fw fa-arrow-circle-down"></i>{{ i18n.locale.newMessageExists }}</button>
 				</div>
 			</transition>
@@ -324,14 +324,15 @@ defineExpose({
 		position: sticky;
 		z-index: 2;
 		bottom: 8px;
+		padding-top: 8px;
 
 		@media (max-width: 500px) {
-			bottom: 100px;
+			bottom: 92px;
 		}
 
 		> .new-message {
 			width: 100%;
-			padding: 8px 0;
+			padding-bottom: 8px;
 			text-align: center;
 
 			> button {

packages/client/src/scripts/scroll.ts

@@ -1,7 +1,7 @@
 type ScrollBehavior = 'auto' | 'smooth' | 'instant';
 
 export function getScrollContainer(el: HTMLElement | null): HTMLElement | null {
-	if (el == null) return null;
+	if (el == null || el.tagName === 'HTML') return null;
 	if (el.scrollHeight > el.clientHeight) {
 		return el;
 	} else {
@@ -77,7 +77,6 @@ export function scrollToBottom(el: HTMLElement, options: { behavior?: ScrollBeha
 	scroll(el, { top: el.scrollHeight, ...options }); // TODO: ちゃんと計算する
 }
 
-// https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollHeight#determine_if_an_element_has_been_totally_scrolled
 export function isBottom(el: HTMLElement, asobi = 1) {
 	const container = getScrollContainer(el);
 	return isScrollBottom(container, asobi);
@@ -92,6 +91,7 @@ export function getBodyScrollHeight() {
 	);
 }
 
+// https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollHeight#determine_if_an_element_has_been_totally_scrolled
 export function isScrollBottom(container?: HTMLElement | null, asobi = 1) {
 	if (container) return container.scrollHeight - Math.abs(container.scrollTop) <= container.clientHeight + asobi;
 	return getBodyScrollHeight() - window.scrollY <= window.innerHeight + asobi;