diff options
Diffstat (limited to 'packages/frontend/src/components/MkNotes.vue')
| -rw-r--r-- | packages/frontend/src/components/MkNotes.vue | 26 |
1 files changed, 24 insertions, 2 deletions
diff --git a/packages/frontend/src/components/MkNotes.vue b/packages/frontend/src/components/MkNotes.vue index 8605877a93..ad4844fd1b 100644 --- a/packages/frontend/src/components/MkNotes.vue +++ b/packages/frontend/src/components/MkNotes.vue @@ -13,14 +13,22 @@ SPDX-License-Identifier: AGPL-3.0-only </template> <template #default="{ items: notes }"> - <div :class="[$style.root, { [$style.noGap]: noGap, '_gaps': !noGap }]"> + <component + :is="prefer.s.animation ? TransitionGroup : 'div'" :class="[$style.root, { [$style.noGap]: noGap, '_gaps': !noGap }]" + :enterActiveClass="$style.transition_x_enterActive" + :leaveActiveClass="$style.transition_x_leaveActive" + :enterFromClass="$style.transition_x_enterFrom" + :leaveToClass="$style.transition_x_leaveTo" + :moveClass=" $style.transition_x_move" + tag="div" + > <template v-for="(note, i) in notes" :key="note.id"> <MkNote :class="$style.note" :note="note" :withHardMute="true"/> <div v-if="note._shouldInsertAd_" :class="$style.ad"> <MkAd :preferForms="['horizontal', 'horizontal-big']"/> </div> </template> - </div> + </component> </template> </MkPagination> </template> @@ -48,6 +56,20 @@ defineExpose({ </script> <style lang="scss" module> +.transition_x_move, +.transition_x_enterActive, +.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_leaveTo { + opacity: 0; + transform: translateY(-50%); +} +.transition_x_leaveActive { + position: absolute; +} + .root { container-type: inline-size; |