monkee.ch/monkeeShark
1
0
Fork 0
Code Pull requests Activity

fix(frontend/HorizontalSwipe): スワイプ・UIアニメーションが無効の際はトランジションを行わないように (#13076)

Browse source 
* fix(frontend/HorizontalSwipe): アニメーションを減らすが考慮されるように

* fix

* fix

* revert unused change

* fix
This commit is contained in:
かっこかり 2024-01-24 09:22:51 +09:00 committed by GitHub
parent 298bc34eaf
commit 2efcb27043
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
1 changed files with 5 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
packages/frontend/src/components/MkHorizontalSwipe.vue
View file

@ -6,7 +6,7 @@ SPDX-License-Identifier: AGPL-3.0-only
<template> <template>
<div <div
ref="rootEl" ref="rootEl"
:class="[$style.transitionRoot]" :class="[$style.transitionRoot, { [$style.enableAnimation]: shouldAnimate }]"
@touchstart.passive="touchStart" @touchstart.passive="touchStart"
@touchmove.passive="touchMove" @touchmove.passive="touchMove"
@touchend.passive="touchEnd" @touchend.passive="touchEnd"
@ -44,6 +44,8 @@ const emit = defineEmits<{
(ev: 'swiped', newKey: string, direction: 'left' | 'right'): void; (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 { .transitionChildren {
grid-area: 1 / 1 / 2 / 2; grid-area: 1 / 1 / 2 / 2;
transform: translateX(var(--swipe)); transform: translateX(var(--swipe));
}
.enableAnimation .transitionChildren {
&.swipeAnimation_enterActive, &.swipeAnimation_enterActive,
&.swipeAnimation_leaveActive { &.swipeAnimation_leaveActive {
transition: transform .3s cubic-bezier(0.65, 0.05, 0.36, 1); transition: transform .3s cubic-bezier(0.65, 0.05, 0.36, 1);