feat: ✨ Fade

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "misskey",
-	"version": "12.118.1-calc.11",
+	"version": "12.118.1-calc.11.1",
 	"codename": "aqua",
 	"repository": {
 		"type": "git",

packages/client/src/pages/timeline.vue

@@ -1,5 +1,6 @@
 <template>
 <MkStickyContainer>
+	<svg class="fader" ref="fader"></svg>
 	<template #header>
 		<MkPageHeader
 			v-model:tab="src"
@@ -83,6 +84,7 @@ window.addEventListener('resize', () => {
 
 const tlComponent = $ref<InstanceType<typeof XTimeline>>();
 const rootEl = $ref<HTMLElement>();
+const fader = $ref<SVGElement>();
 
 let queue = $ref(0);
 const src = $computed({
@@ -276,27 +278,20 @@ if (isMobile.value) {
 
 		if (Math.abs(xDiff) > Math.abs(yDiff)) {
 			if (xDiff > 0) {
-				console.log('right swipe');
-				next =
-					timelines[
-						(timelines.indexOf(src) + 1) % timelines.length
-					];
-			} else {
-				console.log('left swipe');
 				next =
 					timelines[
 						(timelines.indexOf(src) - 1) % timelines.length
 					];
-			}
-			saveSrc(next);
-		} /* else {
-			if (yDiff > 0) {
-				// down swipe
 			} else {
-				// up swipe
+				next =
+					timelines[
+						(timelines.indexOf(src) + 1) % timelines.length
+					];
 			}
-		} */
+			fader.classList.remove('fade');
-		/* reset values */
+			fader.classList.add('fade');
+			saveSrc(next);
+		}
 		xDown = null;
 		yDown = null;
 		return;
@@ -330,4 +325,33 @@ if (isMobile.value) {
 		overflow: clip;
 	}
 }
+
+@keyframes fade {
+		0%, 100% { opacity: 0 }
+		50% { opacity: 1 }
+}
+
+.fader {
+		position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+		opacity: 0;
+    z-index: 1001;
+		pointer-events: none;
+		background: var(--acrylicBg);
+		animation-duration: 0.25s;
+    animation-timing-function: ease-in-out;
+
+		> .fadeOut {
+			opacity: 0;
+			animation-name: fade-out;
+		}
+
+		> .fadeIn {
+			opacity: 1;
+			animation-name: fade-in;
+		}
+}
 </style>