From 2efcb270437645c30c299c2b8473e556070381ab Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E3=81=8B=E3=81=A3=E3=81=93=E3=81=8B=E3=82=8A?=
<67428053+kakkokari-gtyih@users.noreply.github.com>
Date: Wed, 24 Jan 2024 09:22:51 +0900
Subject: [PATCH] =?UTF-8?q?fix(frontend/HorizontalSwipe):=20=E3=82=B9?=
=?UTF-8?q?=E3=83=AF=E3=82=A4=E3=83=97=E3=83=BBUI=E3=82=A2=E3=83=8B?=
=?UTF-8?q?=E3=83=A1=E3=83=BC=E3=82=B7=E3=83=A7=E3=83=B3=E3=81=8C=E7=84=A1?=
=?UTF-8?q?=E5=8A=B9=E3=81=AE=E9=9A=9B=E3=81=AF=E3=83=88=E3=83=A9=E3=83=B3?=
=?UTF-8?q?=E3=82=B8=E3=82=B7=E3=83=A7=E3=83=B3=E3=82=92=E8=A1=8C=E3=82=8F?=
=?UTF-8?q?=E3=81=AA=E3=81=84=E3=82=88=E3=81=86=E3=81=AB=20(#13076)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
* fix(frontend/HorizontalSwipe): アニメーションを減らすが考慮されるように
* fix
* fix
* revert unused change
* fix
---
packages/frontend/src/components/MkHorizontalSwipe.vue | 6 +++++-
1 file changed, 5 insertions(+), 1 deletion(-)
diff --git a/packages/frontend/src/components/MkHorizontalSwipe.vue b/packages/frontend/src/components/MkHorizontalSwipe.vue
index 55bb4b13b0..67d32c505a 100644
--- a/packages/frontend/src/components/MkHorizontalSwipe.vue
+++ b/packages/frontend/src/components/MkHorizontalSwipe.vue
@@ -6,7 +6,7 @@ SPDX-License-Identifier: AGPL-3.0-only
<template>
<div
ref="rootEl"
- :class="[$style.transitionRoot]"
+ :class="[$style.transitionRoot, { [$style.enableAnimation]: shouldAnimate }]"
@touchstart.passive="touchStart"
@touchmove.passive="touchMove"
@touchend.passive="touchEnd"
@@ -44,6 +44,8 @@ const emit = defineEmits<{
(ev: 'swiped', newKey: string, direction: 'left' | 'right'): void;
}>();
+const shouldAnimate = computed(() => defaultStore.reactiveState.enableHorizontalSwipe.value || defaultStore.reactiveState.animation.value);
+
// ▼ しきい値 ▼ //
// スワイプと判定される最小の距離
@@ -188,7 +190,9 @@ watch(tabModel, (newTab, oldTab) => {
.transitionChildren {
grid-area: 1 / 1 / 2 / 2;
transform: translateX(var(--swipe));
+}
+.enableAnimation .transitionChildren {
&.swipeAnimation_enterActive,
&.swipeAnimation_leaveActive {
transition: transform .3s cubic-bezier(0.65, 0.05, 0.36, 1);