diff --git a/packages/frontend/src/ui/_common_/common.vue b/packages/frontend/src/ui/_common_/common.vue index d1f37d398..84500a62d 100644 --- a/packages/frontend/src/ui/_common_/common.vue +++ b/packages/frontend/src/ui/_common_/common.vue @@ -9,8 +9,15 @@ <XUpload v-if="uploads.length > 0"/> -<TransitionGroup :name="$store.state.animation ? 'notification' : ''" tag="div" class="notifications"> - <XNotification v-for="notification in notifications" :key="notification.id" :notification="notification" class="notification"/> +<TransitionGroup + tag="div" :class="$style.notifications" + :move-class="$store.state.animation ? $style.transition_notification_move : ''" + :enter-active-class="$store.state.animation ? $style.transition_notification_enterActive : ''" + :leave-active-class="$store.state.animation ? $style.transition_notification_leaveActive : ''" + :enter-from-class="$store.state.animation ? $style.transition_notification_enterFrom : ''" + :leave-to-class="$store.state.animation ? $style.transition_notification_leaveTo : ''" +> + <XNotification v-for="notification in notifications" :key="notification.id" :notification="notification" :class="$style.notification"/> </TransitionGroup> <XStreamIndicator/> @@ -73,11 +80,14 @@ if ($i) { } </script> -<style lang="scss" scoped> -.notification-move, .notification-enter-active, .notification-leave-active { +<style lang="scss" module> +.transition_notification_move, +.transition_notification_enterActive, +.transition_notification_leaveActive { transition: opacity 0.3s, transform 0.3s !important; } -.notification-enter-from, .notification-leave-to { +.transition_notification_enterFrom, +.transition_notification_leaveTo { opacity: 0; transform: translateX(-250px); } @@ -91,25 +101,27 @@ if ($i) { padding: 0 32px; pointer-events: none; container-type: inline-size; +} - > .notification { - & + .notification { - margin-top: 8px; - } +.notification { + & + .notification { + margin-top: 8px; } +} - @media (max-width: 500px) { +@media (max-width: 500px) { + .notifications { top: initial; bottom: calc(var(--minBottomSpacing) + var(--margin)); padding: 0 var(--margin); display: flex; flex-direction: column-reverse; + } - > .notification { - & + .notification { - margin-top: 0; - margin-bottom: 8px; - } + .notification { + & + .notification { + margin-top: 0; + margin-bottom: 8px; } } }