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

enhance(frontend): タイムラインpush時のアニメーションを調整 (#15936) 

* fix(frontend): タイムラインpush時のアニメーションを復元

* 🎨

* enhance: 消える際のアニメーションも追加

* better support for non-supported browsers

* fix: Skip Note Rendering有効時、TransitionGroupでnoteを追加するときに一瞬がくっとなる問題を修正

* 🎨

* fix
This commit is contained in:
かっこかり 2025-05-04 13:52:01 +09:00 committed by GitHub
parent 5aeedf59ff
commit 8dbd8ff4cf
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 59 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

38
packages/frontend/src/components/MkNotifications.vue
View File

@ -103,18 +103,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 {

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

@ -21,7 +21,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="(note, i) in notes" :key="note.id"> <template v-for="(note, i) in notes" :key="note.id">
@ -305,18 +305,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);
&.note,
.note {
/* Skip Note Rendering有効時、TransitionGroupでnoteを追加するときに一瞬がくっとなる問題を抑制する */
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_leaveTo {
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;
} }
.reverse { .reverse {