use SkTransitionGroup in all locations that hardcode use of TransitionGroup

2 files changed, 19 insertions, 16 deletions

diff --git a/packages/frontend/src/components/MkImgWithBlurhash.vue b/packages/frontend/src/components/MkImgWithBlurhash.vue
index 1282a8fedb..44ede356d0 100644
--- a/packages/frontend/src/components/MkImgWithBlurhash.vue
+++ b/packages/frontend/src/components/MkImgWithBlurhash.vue
@@ -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?: {
diff --git a/packages/frontend/src/components/global/StackingRouterView.vue b/packages/frontend/src/components/global/StackingRouterView.vue
index c95c74aef3..38a5c1ba23 100644
--- a/packages/frontend/src/components/global/StackingRouterView.vue
+++ b/packages/frontend/src/components/global/StackingRouterView.vue
@@ -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;