usbharu
/
misskey
mirror of https://github.com/misskey-dev/misskey.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Update MkStreamingNotificationsTimeline.vue

This commit is contained in:
syuilo 2025-05-04 14:57:59 +09:00
parent cde5be767f
commit 1cecfdd748
1 changed files with 30 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

40
packages/frontend/src/components/MkStreamingNotificationsTimeline.vue
View File

@ -25,7 +25,7 @@ SPDX-License-Identifier: AGPL-3.0-only
:leaveActiveClass="$style.transition_x_leaveActive" :leaveActiveClass="$style.transition_x_leaveActive"
:enterFromClass="$style.transition_x_enterFrom" :enterFromClass="$style.transition_x_enterFrom"
:leaveToClass="$style.transition_x_leaveTo" :leaveToClass="$style.transition_x_leaveTo"
:moveClass=" $style.transition_x_move" :moveClass="$style.transition_x_move"
tag="div" tag="div"
> >
<template v-for="(notification, i) in paginator.items.value" :key="notification.id"> <template v-for="(notification, i) in paginator.items.value" :key="notification.id">
@ -133,18 +133,38 @@ defineExpose({
</script> </script>
<style lang="scss" module> <style lang="scss" module>
.transition_x_move, .transition_x_move {
.transition_x_enterActive, transition: transform 0.7s cubic-bezier(0.23, 1, 0.32, 1);
.transition_x_leaveActive {
transition: opacity 0.3s cubic-bezier(0,.5,.5,1), transform 0.3s cubic-bezier(0,.5,.5,1) !important;
} }
.transition_x_enterFrom,
.transition_x_enterActive {
transition: transform 0.7s cubic-bezier(0.23, 1, 0.32, 1), opacity 0.7s cubic-bezier(0.23, 1, 0.32, 1);
&.item,
.item {
/* Skip Note Rendering有効時、TransitionGroupで通知を追加するときに一瞬がくっとなる問題を抑制する */
content-visibility: visible !important;
}
}
.transition_x_leaveActive {
transition: height 0.2s cubic-bezier(0,.5,.5,1), opacity 0.2s cubic-bezier(0,.5,.5,1);
}
.transition_x_enterFrom {
opacity: 0;
transform: translateY(max(-64px, -100%));
}
@supports (interpolate-size: allow-keywords) {
.transition_x_enterFrom {
interpolate-size: allow-keywords; // heightのtransitionを動作させるために必要
height: 0;
}
}
.transition_x_leaveTo { .transition_x_leaveTo {
opacity: 0; opacity: 0;
transform: translateY(-50%);
}
.transition_x_leaveActive {
position: absolute;
} }
.notifications { .notifications {