🎨

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 {

src/client/components/sequential-entrance.vue

@@ -1,8 +1,6 @@
 <template>
 <transition-group v-if="$store.state.device.animation"
 	class="uupnnhew"
-	:data-direction="direction"
-	:data-reversed="reversed ? 'true' : 'false'"
 	name="staggered"
 	tag="div"
 	appear
@@ -18,23 +16,6 @@
 import Vue from 'vue';
 
 export default Vue.extend({
-	props: {
-		delay: {
-			type: Number,
-			required: false,
-			default: 40
-		},
-		direction: {
-			type: String,
-			required: false,
-			default: 'down'
-		},
-		reversed: {
-			type: Boolean,
-			required: false,
-			default: false
-		}
-	},
 	methods: {
 		focus() {
 			this.$slots.default[0].elm.focus();
@@ -44,35 +25,14 @@ export default Vue.extend({
 </script>
 
 <style lang="scss">
-.staggered-move {
-	transition: transform 0.7s cubic-bezier(0.23, 1, 0.32, 1) !important;
-}
-
-.uupnnhew[data-direction="up"] {
-	.staggered-enter {
-		opacity: 0;
-		transform: translateY(64px);
-	}
-}
-
-.uupnnhew[data-direction="down"] {
-	.staggered-enter {
+.uupnnhew {
+	> .staggered-enter {
 		opacity: 0;
 		transform: translateY(-64px);
 	}
-}
 
-.uupnnhew[data-reversed="true"] {
 	@for $i from 1 through 30 {
-		.staggered-enter-active:nth-last-child(#{$i}) {
-			transition: transform 0.7s cubic-bezier(0.23, 1, 0.32, 1) (15ms * ($i - 1)), opacity 0.7s cubic-bezier(0.23, 1, 0.32, 1) (15ms * ($i - 1));
-		}
-	}
-}
-
-.uupnnhew[data-reversed="false"] {
-	@for $i from 1 through 30 {
-		.staggered-enter-active:nth-child(#{$i}) {
+		> .staggered-enter-active:nth-child(#{$i}) {
 			transition: transform 0.7s cubic-bezier(0.23, 1, 0.32, 1) (15ms * ($i - 1)), opacity 0.7s cubic-bezier(0.23, 1, 0.32, 1) (15ms * ($i - 1));
 		}
 	}