From 33e76f9dfcd7198f5e1e3bffab2d2ee062f1c38f Mon Sep 17 00:00:00 2001
From: syuilo <4439005+syuilo@users.noreply.github.com>
Date: Sat, 29 Mar 2025 13:55:05 +0900
Subject: [PATCH] =?UTF-8?q?Revert=20"=F0=9F=8E=A8"?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
This reverts commit 3451c9a0dedb95d7b22cece61202a9cb027c374d.
---
.../frontend/src/components/MkPagination.vue | 65 ++++++++++++-------
1 file changed, 41 insertions(+), 24 deletions(-)
diff --git a/packages/frontend/src/components/MkPagination.vue b/packages/frontend/src/components/MkPagination.vue
index d23346971f..d90db1748c 100644
--- a/packages/frontend/src/components/MkPagination.vue
+++ b/packages/frontend/src/components/MkPagination.vue
@@ -4,34 +4,42 @@ SPDX-License-Identifier: AGPL-3.0-only
-->
<template>
-<MkLoading v-if="fetching"/>
+<Transition
+ :enterActiveClass="prefer.s.animation ? $style.transition_fade_enterActive : ''"
+ :leaveActiveClass="prefer.s.animation ? $style.transition_fade_leaveActive : ''"
+ :enterFromClass="prefer.s.animation ? $style.transition_fade_enterFrom : ''"
+ :leaveToClass="prefer.s.animation ? $style.transition_fade_leaveTo : ''"
+ mode="out-in"
+>
+ <MkLoading v-if="fetching"/>
-<MkError v-else-if="error" @retry="init()"/>
+ <MkError v-else-if="error" @retry="init()"/>
-<div v-else-if="empty" key="_empty_" class="empty">
- <slot name="empty">
- <div class="_fullinfo">
- <img :src="infoImageUrl" draggable="false"/>
- <div>{{ i18n.ts.nothing }}</div>
+ <div v-else-if="empty" key="_empty_" class="empty">
+ <slot name="empty">
+ <div class="_fullinfo">
+ <img :src="infoImageUrl" draggable="false"/>
+ <div>{{ i18n.ts.nothing }}</div>
+ </div>
+ </slot>
+ </div>
+
+ <div v-else ref="rootEl" class="_gaps">
+ <div v-show="pagination.reversed && more" key="_more_">
+ <MkButton v-if="!moreFetching" v-appear="(enableInfiniteScroll && !props.disableAutoLoad) ? appearFetchMoreAhead : null" :class="$style.more" :wait="moreFetching" primary rounded @click="fetchMoreAhead">
+ {{ i18n.ts.loadMore }}
+ </MkButton>
+ <MkLoading v-else class="loading"/>
+ </div>
+ <slot :items="Array.from(items.values())" :fetching="fetching || moreFetching"></slot>
+ <div v-show="!pagination.reversed && more" key="_more_">
+ <MkButton v-if="!moreFetching" v-appear="(enableInfiniteScroll && !props.disableAutoLoad) ? appearFetchMore : null" :class="$style.more" :wait="moreFetching" primary rounded @click="fetchMore">
+ {{ i18n.ts.loadMore }}
+ </MkButton>
+ <MkLoading v-else class="loading"/>
</div>
- </slot>
-</div>
-
-<div v-else ref="rootEl" class="_gaps">
- <div v-show="pagination.reversed && more" key="_more_">
- <MkButton v-if="!moreFetching" v-appear="(enableInfiniteScroll && !props.disableAutoLoad) ? appearFetchMoreAhead : null" :class="$style.more" :wait="moreFetching" primary rounded @click="fetchMoreAhead">
- {{ i18n.ts.loadMore }}
- </MkButton>
- <MkLoading v-else class="loading"/>
</div>
- <slot :items="Array.from(items.values())" :fetching="fetching || moreFetching"></slot>
- <div v-show="!pagination.reversed && more" key="_more_">
- <MkButton v-if="!moreFetching" v-appear="(enableInfiniteScroll && !props.disableAutoLoad) ? appearFetchMore : null" :class="$style.more" :wait="moreFetching" primary rounded @click="fetchMore">
- {{ i18n.ts.loadMore }}
- </MkButton>
- <MkLoading v-else class="loading"/>
- </div>
-</div>
+</Transition>
</template>
<script lang="ts">
@@ -483,6 +491,15 @@ defineExpose({
</script>
<style lang="scss" module>
+.transition_fade_enterActive,
+.transition_fade_leaveActive {
+ transition: opacity 0.125s ease;
+}
+.transition_fade_enterFrom,
+.transition_fade_leaveTo {
+ opacity: 0;
+}
+
.more {
margin-left: auto;
margin-right: auto;