diff --git a/packages/frontend/src/components/MkDateSeparatedList.vue b/packages/frontend/src/components/MkDateSeparatedList.vue index 6942a0e6c..479f7d3ca 100644 --- a/packages/frontend/src/components/MkDateSeparatedList.vue +++ b/packages/frontend/src/components/MkDateSeparatedList.vue @@ -33,6 +33,11 @@ export default defineComponent({ required: false, default: false, }, + denyMoveTransition: { + type: Boolean, + required: false, + default: false, + }, }, setup(props, { slots, expose }) { @@ -130,6 +135,7 @@ export default defineComponent({ [$style['reversed']]: props.reversed, [$style['direction-down']]: props.direction === 'down', [$style['direction-up']]: props.direction === 'up', + 'deny-move-transition': props.denyMoveTransition, }, ...(defaultStore.state.animation ? { name: 'list', @@ -148,15 +154,11 @@ export default defineComponent({ container-type: inline-size; &:global { - > .list-move { + &:not(.deny-move-transition) > .list-move { transition: transform 0.7s cubic-bezier(0.23, 1, 0.32, 1); } - &.deny-move-transition > .list-move { - transition: none !important; - } - - > .list-enter-active { + &:not(.deny-move-transition) > .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); } diff --git a/packages/frontend/src/components/MkNotes.vue b/packages/frontend/src/components/MkNotes.vue index 140e44752..f00b70915 100644 --- a/packages/frontend/src/components/MkNotes.vue +++ b/packages/frontend/src/components/MkNotes.vue @@ -17,10 +17,8 @@ :reversed="pagination.reversed" :noGap="noGap" :ad="true" - :class="{ - [$style.notes]: true, - 'deny-move-transition': denyMoveTransition, - }" + :denyMoveTransition="denyMoveTransition" + :class="$style.notes" > diff --git a/packages/frontend/src/components/MkNotifications.vue b/packages/frontend/src/components/MkNotifications.vue index 5fd42fc1e..63a17cf61 100644 --- a/packages/frontend/src/components/MkNotifications.vue +++ b/packages/frontend/src/components/MkNotifications.vue @@ -8,7 +8,7 @@