:art:

1 files changed, 31 insertions, 4 deletions

diff --git a/src/client/components/date-separated-list.vue b/src/client/components/date-separated-list.vue
index 5c6917b3f9..53fd0a7c7f 100644
--- a/src/client/components/date-separated-list.vue
+++ b/src/client/components/date-separated-list.vue
@@ -1,5 +1,5 @@
 <template>
-<sequential-entrance class="sqadhkmv" ref="list" :direction="direction" :reversed="reversed">
+<component :is="$store.state.device.animation ? 'transition-group' : 'div'" class="sqadhkmv" name="list" tag="div" appear :data-direction="direction" :data-reversed="reversed ? 'true' : 'false'">
 	<template v-for="(item, i) in items">
 		<slot :item="item" :i="i"></slot>
 		<div class="separator" :key="item.id + '_date'" v-if="showDate(i, item)">
@@ -9,7 +9,7 @@
 			</p>
 		</div>
 	</template>
-</sequential-entrance>
+</component>
 </template>
 
 <script lang="ts">
@@ -27,7 +27,8 @@ export default Vue.extend({
 		},
 		direction: {
 			type: String,
-			required: false
+			required: false,
+			default: 'down'
 		},
 		reversed: {
 			type: Boolean,
@@ -63,12 +64,38 @@ export default Vue.extend({
 		},
 
 		focus() {
-			this.$refs.list.focus();
+			this.$slots.default[0].elm.focus();
 		}
 	}
 });
 </script>
 
+<style lang="scss">
+.sqadhkmv {
+	> .list-move {
+		transition: transform 0.7s cubic-bezier(0.23, 1, 0.32, 1);
+	}
+
+	> .list-enter-active {
+		transition: transform 0.7s cubic-bezier(0.23, 1, 0.32, 1), opacity 0.7s cubic-bezier(0.23, 1, 0.32, 1);
+	}
+
+	&[data-direction="up"] {
+		> .list-enter {
+			opacity: 0;
+			transform: translateY(64px);
+		}
+	}
+
+	&[data-direction="down"] {
+		> .list-enter {
+			opacity: 0;
+			transform: translateY(-64px);
+		}
+	}
+}
+</style>
+
 <style lang="scss" scoped>
 .sqadhkmv {
 	> .separator {