test
This commit is contained in:
parent
1062371296
commit
cb63a1ed00
|
@ -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);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -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>
|
||||||
|
|
|
@ -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>
|
||||||
|
|
Loading…
Reference in a new issue