misty.cafe/mistykey
1
0
Fork 0
Code Issues Pull requests 1 Projects Releases Packages Wiki Activity Actions

use SkTransitionGroup in all locations that hardcode use of TransitionGroup

Browse source
This commit is contained in:
Hazelnoot 2025-05-29 12:43:12 -04:00
parent 2f91c66ba2
commit 18a6f47082
6 changed files with 41 additions and 34 deletions
Download patch file Download diff file Expand all files Collapse all files

20
packages/frontend/src/components/MkImgWithBlurhash.vue
View file

@ -5,14 +5,15 @@ SPDX-License-Identifier: AGPL-3.0-only
<template>
<div ref="root" :class="['chromatic-ignore', $style.root, { [$style.cover]: cover }]" :title="title ?? ''">
<TransitionGroup
:duration="prefer.s.animation && props.transition?.duration || undefined"
:enterActiveClass="prefer.s.animation && props.transition?.enterActiveClass || undefined"
:leaveActiveClass="prefer.s.animation && (props.transition?.leaveActiveClass ?? $style.transition_leaveActive) || undefined"
:enterFromClass="prefer.s.animation && props.transition?.enterFromClass || undefined"
:leaveToClass="prefer.s.animation && props.transition?.leaveToClass || undefined"
:enterToClass="prefer.s.animation && props.transition?.enterToClass || undefined"
:leaveFromClass="prefer.s.animation && props.transition?.leaveFromClass || undefined"
<SkTransitionGroup
:animate="props.transition != null"
:duration="props.transition?.duration"
:enterActiveClass="props.transition?.enterActiveClass"
:leaveActiveClass="(props.transition?.leaveActiveClass ?? $style.transition_leaveActive)"
:enterFromClass="props.transition?.enterFromClass"
:leaveToClass="props.transition?.leaveToClass"
:enterToClass="props.transition?.enterToClass"
:leaveFromClass="props.transition?.leaveFromClass"
>
<canvas
v-show="hide"
@ -42,7 +43,7 @@ SPDX-License-Identifier: AGPL-3.0-only
tabindex="-1"
style="-webkit-user-drag: none;"
/>
</TransitionGroup>
</SkTransitionGroup>
</div>
</template>
@ -85,6 +86,7 @@ import { computed, nextTick, onMounted, onUnmounted, useTemplateRef, watch, ref
import { v4 as uuid } from 'uuid';
import { render } from 'buraha';
import { prefer } from '@/preferences.js';
import SkTransitionGroup from '@/components/SkTransitionGroup.vue';
const props = withDefaults(defineProps<{
transition?: {

15
packages/frontend/src/components/global/StackingRouterView.vue
View file

@ -4,12 +4,12 @@ SPDX-License-Identifier: AGPL-3.0-only
-->
<template>
<TransitionGroup
:enterActiveClass="prefer.s.animation ? $style.transition_x_enterActive : ''"
:leaveActiveClass="prefer.s.animation ? $style.transition_x_leaveActive : ''"
:enterFromClass="prefer.s.animation ? $style.transition_x_enterFrom : ''"
:leaveToClass="prefer.s.animation ? $style.transition_x_leaveTo : ''"
:moveClass="prefer.s.animation ? $style.transition_x_move : ''"
<SkTransitionGroup
:enterActiveClass="$style.transition_x_enterActive"
:leaveActiveClass="$style.transition_x_leaveActive"
:enterFromClass="$style.transition_x_enterFrom"
:leaveToClass="$style.transition_x_leaveTo"
:moveClass="$style.transition_x_move"
:duration="200"
tag="div" :class="$style.tabs"
>
@ -37,7 +37,7 @@ SPDX-License-Identifier: AGPL-3.0-only
</div>
</div>
</div>
</TransitionGroup>
</SkTransitionGroup>
</template>
<script lang="ts" setup>
@ -47,6 +47,7 @@ import { prefer } from '@/preferences.js';
import MkLoadingPage from '@/pages/_loading_.vue';
import { DI } from '@/di.js';
import { deepEqual } from '@/utility/deep-equal.js';
import SkTransitionGroup from '@/components/SkTransitionGroup.vue';
const props = defineProps<{
router?: Router;