From 4c87e98e1245a88f8eb2a49d71214fa7163d8676 Mon Sep 17 00:00:00 2001
From: syuilo <Syuilotan@yahoo.co.jp>
Date: Sun, 21 Jan 2024 18:08:49 +0900
Subject: [PATCH] =?UTF-8?q?fix(frontend):=20MkHorizontalSwipe=E3=81=A7?=
 =?UTF-8?q?=E3=83=A1=E3=83=8B=E3=83=A5=E3=83=BC=E3=82=92=E9=96=89=E3=81=98?=
 =?UTF-8?q?=E3=82=8B=E3=81=AE=E3=81=AB2=E5=9B=9E=E3=82=AF=E3=83=AA?=
 =?UTF-8?q?=E3=83=83=E3=82=AF=E3=81=8C=E5=BF=85=E8=A6=81=E3=81=AB=E3=81=AA?=
 =?UTF-8?q?=E3=82=8B=E5=95=8F=E9=A1=8C=E3=82=92=E4=BF=AE=E6=AD=A3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

#13055
---
 .../src/components/MkHorizontalSwipe.vue      | 43 ++++++++++---------
 1 file changed, 22 insertions(+), 21 deletions(-)

diff --git a/packages/frontend/src/components/MkHorizontalSwipe.vue b/packages/frontend/src/components/MkHorizontalSwipe.vue
index a7d0d5a3e..55bb4b13b 100644
--- a/packages/frontend/src/components/MkHorizontalSwipe.vue
+++ b/packages/frontend/src/components/MkHorizontalSwipe.vue
@@ -6,10 +6,10 @@ SPDX-License-Identifier: AGPL-3.0-only
 <template>
 <div
 	ref="rootEl"
-	:class="[$style.transitionRoot, (defaultStore.state.animation && $style.enableAnimation)]"
-	@touchstart="touchStart"
-	@touchmove="touchMove"
-	@touchend="touchEnd"
+	:class="[$style.transitionRoot]"
+	@touchstart.passive="touchStart"
+	@touchmove.passive="touchMove"
+	@touchend.passive="touchEnd"
 >
 	<Transition
 		:class="[$style.transitionChildren, { [$style.swiping]: isSwipingForClass }]"
@@ -25,6 +25,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 	</Transition>
 </div>
 </template>
+
 <script lang="ts" setup>
 import { ref, shallowRef, computed, nextTick, watch } from 'vue';
 import type { Tab } from '@/components/global/MkPageHeader.tabs.vue';
@@ -154,7 +155,7 @@ function touchEnd(event: TouchEvent) {
 
 	pullDistance.value = 0;
 	isSwiping.value = false;
-	setTimeout(() => {
+	window.setTimeout(() => {
 		isSwipingForClass.value = false;
 	}, 400);
 }
@@ -178,29 +179,29 @@ watch(tabModel, (newTab, oldTab) => {
 </script>
 
 <style lang="scss" module>
-.transitionRoot.enableAnimation {
+.transitionRoot {
 	display: grid;
 	grid-template-columns: 100%;
 	overflow: clip;
+}
 
-	.transitionChildren {
-		grid-area: 1 / 1 / 2 / 2;
-		transform: translateX(var(--swipe));
+.transitionChildren {
+	grid-area: 1 / 1 / 2 / 2;
+	transform: translateX(var(--swipe));
 
-		&.swipeAnimation_enterActive,
-		&.swipeAnimation_leaveActive {
-			transition: transform .3s cubic-bezier(0.65, 0.05, 0.36, 1);
-		}
+	&.swipeAnimation_enterActive,
+	&.swipeAnimation_leaveActive {
+		transition: transform .3s cubic-bezier(0.65, 0.05, 0.36, 1);
+	}
 
-		&.swipeAnimationRight_leaveTo,
-		&.swipeAnimationLeft_enterFrom {
-			transform: translateX(calc(100% + 24px));
-		}
+	&.swipeAnimationRight_leaveTo,
+	&.swipeAnimationLeft_enterFrom {
+		transform: translateX(calc(100% + 24px));
+	}
 
-		&.swipeAnimationRight_enterFrom,
-		&.swipeAnimationLeft_leaveTo {
-			transform: translateX(calc(-100% - 24px));
-		}
+	&.swipeAnimationRight_enterFrom,
+	&.swipeAnimationLeft_leaveTo {
+		transform: translateX(calc(-100% - 24px));
 	}
 }