worldcone/cherrypick
2
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

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

Browse source 
#13055
This commit is contained in:
syuilo 2024-01-21 18:08:49 +09:00
parent b3cc17ea0d
commit 4c87e98e12
1 changed files with 22 additions and 21 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

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