This commit is contained in:
tamaina 2023-07-18 03:24:53 +00:00
parent 1062371296
commit cb63a1ed00
3 changed files with 11 additions and 11 deletions

View file

@ -33,6 +33,11 @@ export default defineComponent({
required: false, required: false,
default: false, default: false,
}, },
denyMoveTransition: {
type: Boolean,
required: false,
default: false,
},
}, },
setup(props, { slots, expose }) { setup(props, { slots, expose }) {
@ -130,6 +135,7 @@ export default defineComponent({
[$style['reversed']]: props.reversed, [$style['reversed']]: props.reversed,
[$style['direction-down']]: props.direction === 'down', [$style['direction-down']]: props.direction === 'down',
[$style['direction-up']]: props.direction === 'up', [$style['direction-up']]: props.direction === 'up',
'deny-move-transition': props.denyMoveTransition,
}, },
...(defaultStore.state.animation ? { ...(defaultStore.state.animation ? {
name: 'list', name: 'list',
@ -148,15 +154,11 @@ export default defineComponent({
container-type: inline-size; container-type: inline-size;
&:global { &:global {
> .list-move { &:not(.deny-move-transition) > .list-move {
transition: transform 0.7s cubic-bezier(0.23, 1, 0.32, 1); transition: transform 0.7s cubic-bezier(0.23, 1, 0.32, 1);
} }
&.deny-move-transition > .list-move { &:not(.deny-move-transition) > .list-enter-active {
transition: none !important;
}
> .list-enter-active {
transition: transform 0.7s cubic-bezier(0.23, 1, 0.32, 1), opacity 0.7s cubic-bezier(0.23, 1, 0.32, 1); transition: transform 0.7s cubic-bezier(0.23, 1, 0.32, 1), opacity 0.7s cubic-bezier(0.23, 1, 0.32, 1);
} }

View file

@ -17,10 +17,8 @@
:reversed="pagination.reversed" :reversed="pagination.reversed"
:noGap="noGap" :noGap="noGap"
:ad="true" :ad="true"
:class="{ :denyMoveTransition="denyMoveTransition"
[$style.notes]: true, :class="$style.notes"
'deny-move-transition': denyMoveTransition,
}"
> >
<MkNote :key="note._featuredId_ || note._prId_ || note.id" :class="$style.note" :note="note"/> <MkNote :key="note._featuredId_ || note._prId_ || note.id" :class="$style.note" :note="note"/>
</MkDateSeparatedList> </MkDateSeparatedList>

View file

@ -8,7 +8,7 @@
</template> </template>
<template #default="{ items: notifications, denyMoveTransition }"> <template #default="{ items: notifications, denyMoveTransition }">
<MkDateSeparatedList v-slot="{ item: notification }" :class="{ [$style.list]: true, 'deny-move-transition': denyMoveTransition }" :items="notifications" :noGap="true"> <MkDateSeparatedList v-slot="{ item: notification }" :class="$style.list" :items="notifications" :noGap="true" :denyMoveTransition="denyMoveTransition">
<MkNote v-if="['reply', 'quote', 'mention'].includes(notification.type)" :key="`showNotificationAsNote:${notification.id}`" :note="notification.note"/> <MkNote v-if="['reply', 'quote', 'mention'].includes(notification.type)" :key="`showNotificationAsNote:${notification.id}`" :note="notification.note"/>
<XNotification v-else :key="notification.id" :notification="notification" :withTime="true" :full="true" class="_panel notification"/> <XNotification v-else :key="notification.id" :notification="notification" :withTime="true" :full="true" class="_panel notification"/>
</MkDateSeparatedList> </MkDateSeparatedList>