parent
b3cc17ea0d
commit
4c87e98e12
1 changed files with 22 additions and 21 deletions
|
@ -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));
|
||||
}
|
||||
}
|
||||
|
||||
|
|
Loading…
Reference in a new issue