diff options
Diffstat (limited to 'packages/frontend/src/components/MkTimeline.vue')
| -rw-r--r-- | packages/frontend/src/components/MkTimeline.vue | 38 |
1 files changed, 29 insertions, 9 deletions
diff --git a/packages/frontend/src/components/MkTimeline.vue b/packages/frontend/src/components/MkTimeline.vue index bbf1a03c32..e2c261787b 100644 --- a/packages/frontend/src/components/MkTimeline.vue +++ b/packages/frontend/src/components/MkTimeline.vue @@ -21,7 +21,7 @@ SPDX-License-Identifier: AGPL-3.0-only :leaveActiveClass="$style.transition_x_leaveActive" :enterFromClass="$style.transition_x_enterFrom" :leaveToClass="$style.transition_x_leaveTo" - :moveClass=" $style.transition_x_move" + :moveClass="$style.transition_x_move" tag="div" > <template v-for="(note, i) in notes" :key="note.id"> @@ -305,18 +305,38 @@ defineExpose({ </script> <style lang="scss" module> -.transition_x_move, -.transition_x_enterActive, +.transition_x_move { + transition: transform 0.7s cubic-bezier(0.23, 1, 0.32, 1); +} + +.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: opacity 0.3s cubic-bezier(0,.5,.5,1), transform 0.3s cubic-bezier(0,.5,.5,1) !important; + transition: height 0.2s cubic-bezier(0,.5,.5,1), opacity 0.2s cubic-bezier(0,.5,.5,1); } -.transition_x_enterFrom, -.transition_x_leaveTo { + +.transition_x_enterFrom { opacity: 0; - transform: translateY(-50%); + transform: translateY(max(-64px, -100%)); } -.transition_x_leaveActive { - position: absolute; + +@supports (interpolate-size: allow-keywords) { + .transition_x_leaveTo { + interpolate-size: allow-keywords; // heightのtransitionを動作させるために必要 + height: 0; + } +} + +.transition_x_leaveTo { + opacity: 0; } .reverse { |