diff options
| author | Hazelnoot <acomputerdog@gmail.com> | 2025-05-29 12:41:36 -0400 |
|---|---|---|
| committer | Hazelnoot <acomputerdog@gmail.com> | 2025-05-29 12:41:36 -0400 |
| commit | 7a003dec73b79cbfed2ca4586f7a77652b55371d (patch) | |
| tree | ca2ad3f798e1591269cb459805d4c75888afc1f8 /packages/frontend/src/components/MkNotifications.vue | |
| parent | implement SkTransitionGroup to dynamically switch between TransitionGroup or ... (diff) | |
| download | sharkey-7a003dec73b79cbfed2ca4586f7a77652b55371d.tar.gz sharkey-7a003dec73b79cbfed2ca4586f7a77652b55371d.tar.bz2 sharkey-7a003dec73b79cbfed2ca4586f7a77652b55371d.zip | |
use SkTransitionGroup for all dynamic TransitionGroup components
Diffstat (limited to 'packages/frontend/src/components/MkNotifications.vue')
| -rw-r--r-- | packages/frontend/src/components/MkNotifications.vue | 7 |
1 files changed, 4 insertions, 3 deletions
diff --git a/packages/frontend/src/components/MkNotifications.vue b/packages/frontend/src/components/MkNotifications.vue index 54edf771ed..46e98462dc 100644 --- a/packages/frontend/src/components/MkNotifications.vue +++ b/packages/frontend/src/components/MkNotifications.vue @@ -14,8 +14,8 @@ SPDX-License-Identifier: AGPL-3.0-only </template> <template #default="{ items: notifications }"> - <component - :is="prefer.s.animation ? TransitionGroup : 'div'" :class="[$style.notifications]" + <SkTransitionGroup + :class="[$style.notifications]" :enterActiveClass="$style.transition_x_enterActive" :leaveActiveClass="$style.transition_x_leaveActive" :enterFromClass="$style.transition_x_enterFrom" @@ -27,7 +27,7 @@ SPDX-License-Identifier: AGPL-3.0-only <DynamicNote v-if="['reply', 'quote', 'mention'].includes(notification.type)" :class="$style.item" :note="notification.note" :withHardMute="true" :data-scroll-anchor="notification.id"/> <XNotification v-else :class="$style.item" :notification="notification" :withTime="true" :full="true" :data-scroll-anchor="notification.id"/> </div> - </component> + </SkTransitionGroup> </template> </MkPagination> </MkPullToRefresh> @@ -45,6 +45,7 @@ import { i18n } from '@/i18n.js'; import { infoImageUrl } from '@/instance.js'; import MkPullToRefresh from '@/components/MkPullToRefresh.vue'; import { prefer } from '@/preferences.js'; +import SkTransitionGroup from '@/components/SkTransitionGroup.vue'; const props = defineProps<{ excludeTypes?: typeof notificationTypes[number][]; |