🎨

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));
 		}
 	}