fix(frontend): MkHorizontalSwipeでメニューを閉じるのに2回クリックが必要になる問題を修正

#13055

1 files changed, 22 insertions, 21 deletions

diff --git a/packages/frontend/src/components/MkHorizontalSwipe.vue b/packages/frontend/src/components/MkHorizontalSwipe.vue
index a7d0d5a3e4..55bb4b13b0 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));
 	}
 }