#1533

src/client/app/desktop/views/components/notifications.vue

@@ -1,6 +1,7 @@
 <template>
 <div class="mk-notifications">
 	<div class="notifications" v-if="notifications.length != 0">
+		<transition-group name="mk-notifications" class="transition">
 			<template v-for="(notification, i) in _notifications">
 				<div class="notification" :class="notification.type" :key="notification.id">
 					<mk-time :time="notification.createdAt"/>
@@ -91,6 +92,7 @@
 					<span>%fa:angle-down%{{ _notifications[i + 1]._datetext }}</span>
 				</p>
 			</template>
+		</transition-group>
 	</div>
 	<button class="more" :class="{ fetching: fetchingMoreNotifications }" v-if="moreNotifications" @click="fetchMoreNotifications" :disabled="fetchingMoreNotifications">
 		<template v-if="fetchingMoreNotifications">%fa:spinner .pulse .fw%</template>{{ fetchingMoreNotifications ? '%i18n:!common.loading%' : '%i18n:!@more%' }}
@@ -186,7 +188,17 @@ export default Vue.extend({
 
 <style lang="stylus" scoped>
 root(isDark)
+	.transition
+		.mk-notifications-enter
+		.mk-notifications-leave-to
+			opacity 0
+			transform translateY(-30px)
+
+		> *
+			transition transform .3s ease, opacity .3s ease
+
 	> .notifications
+		> *
 			> .notification
 				margin 0
 				padding 16px