diff options
| -rw-r--r-- | packages/frontend/src/components/MkHorizontalSwipe.vue | 6 |
1 files changed, 5 insertions, 1 deletions
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); |