oscar-surf/misskey
oscar-surf/misskey
0
0
Fork 0
Code Issues Activity

fix: MSKY-77 (MisskeyIO#956)

Browse source
This commit is contained in:
あわわわとーにゅ 2025-03-31 12:07:19 +09:00 • committed by GitHub
parent 9262571e81
commit e888ee414b
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 17 additions and 22 deletions
Download patch file Download diff file Expand all files Collapse all files

35
packages/frontend/src/components/MkDateSeparatedList.vue
View file

@ -120,16 +120,12 @@ export default defineComponent({
};
function onBeforeLeave(element: Element) {
if (isAprilFoolsDay()) return;
const el = element as HTMLElement;
el.style.top = `${el.offsetTop}px`;
el.style.left = `${el.offsetLeft}px`;
}
function onLeaveCancelled(element: Element) {
if (isAprilFoolsDay()) return;
const el = element as HTMLElement;
el.style.top = '';
el.style.left = '';
@ -141,15 +137,15 @@ export default defineComponent({
[$style['date-separated-list-nogap']]: props.noGap,
[$style['direction-down']]: props.direction === 'down',
[$style['direction-up']]: props.direction === 'up',
[$style['april-fool']]: isAprilFoolsDay(),
[$style['april-fool']]: defaultStore.state.animation ? isAprilFoolsDay() : false,
};
return () => defaultStore.state.animation ? h(TransitionGroup, {
class: classes,
name: 'list',
tag: 'div',
onBeforeLeave,
onLeaveCancelled,
onBeforeLeave: !isAprilFoolsDay() ? onBeforeLeave : undefined,
onLeaveCancelled: !isAprilFoolsDay() ? onLeaveCancelled : undefined,
}, { default: renderChildren }) : h('div', {
class: classes,
}, { default: renderChildren });
@ -216,8 +212,18 @@ export default defineComponent({
}
}
.direction-up.april-fool ,
.direction-down.april-fool {
@keyframes spin-shrink {
0% {
transform: rotate(0deg) scale(1);
opacity: 1;
}
100% {
transform: rotate(2160deg) scale(0);
opacity: 0;
}
}
.april-fool {
&:global > .list-enter-from,
&:global > .list-leave-to {
animation: components-MkDateSeparatedList-spin-shrink 3s ease-in forwards;
@ -254,16 +260,5 @@ export default defineComponent({
.date-2-icon {
margin-left: 8px;
}
@keyframes spin-shrink {
0% {
transform: rotate(0deg) scale(1);
opacity: 1;
}
100% {
transform: rotate(2160deg) scale(0);
opacity: 0;
}
}
</style>