mirror of
https://github.com/misskey-dev/misskey.git
synced 2024-12-24 00:39:32 +09:00
fix(frontend/HorizontalSwipe): スワイプ・UIアニメーションが無効の際はトランジションを行わないように (#13076)
* fix(frontend/HorizontalSwipe): アニメーションを減らすが考慮されるように * fix * fix * revert unused change * fix
This commit is contained in:
parent
298bc34eaf
commit
2efcb27043
@ -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);
|
||||||
|
Loading…
Reference in New Issue
Block a user