From 5a4dacd3d3139670087aa126e50386496701079c Mon Sep 17 00:00:00 2001
From: syuilo <Syuilotan@yahoo.co.jp>
Date: Sat, 15 Feb 2020 18:39:45 +0900
Subject: [PATCH] Update sequential-entrance.vue

---
 src/client/components/sequential-entrance.vue | 78 +++++++++----------
 1 file changed, 37 insertions(+), 41 deletions(-)

diff --git a/src/client/components/sequential-entrance.vue b/src/client/components/sequential-entrance.vue
index 67745a289..1908aec73 100644
--- a/src/client/components/sequential-entrance.vue
+++ b/src/client/components/sequential-entrance.vue
@@ -1,12 +1,10 @@
 <template>
 <transition-group v-if="$store.state.device.animation"
-	name="staggered-fade"
+	class="uupnnhew"
+	:data-direction="direction"
+	:data-reversed="reversed ? 'true' : 'false'"
+	name="staggered"
 	tag="div"
-	:css="false"
-	@before-enter="beforeEnter"
-	@enter="enter"
-	@leave="leave"
-	mode="out-in"
 	appear
 >
 	<slot></slot>
@@ -37,48 +35,46 @@ export default Vue.extend({
 			default: false
 		}
 	},
-	i: 0,
 	methods: {
-		beforeEnter(el) {
-			if (document.hidden) return;
-
-			el.style.opacity = 0;
-			el.style.transform = this.direction === 'down' ? 'translateY(-64px)' : 'translateY(64px)';
-			const delay = this.delay * this.$options.i;
-			el.style.transition = [getComputedStyle(el).transition, `transform 0.7s cubic-bezier(0.23, 1, 0.32, 1) ${delay}ms`, `opacity 0.7s cubic-bezier(0.23, 1, 0.32, 1) ${delay}ms`].filter(x => x != '').join(',');
-			this.$options.i++;
-
-			setTimeout(() => {
-				el.style.transition = null;
-				el.style.transform = null;
-				el.style.opacity = null;
-				this.$options.i--;
-			}, delay + 710);
-		},
-		enter(el) {
-			if (document.hidden) {
-				el.style.opacity = 1;
-				el.style.transform = 'translateY(0px)';
-			} else {
-				setTimeout(() => { // 必要
-					el.style.opacity = 1;
-					el.style.transform = 'translateY(0px)';
-				});
-			}
-		},
-		leave(el) {
-			el.style.opacity = 0;
-			el.style.transform = this.direction === 'down' ? 'translateY(64px)' : 'translateY(-64px)';
-		},
 		focus() {
 			this.$slots.default[0].elm.focus();
 		}
-	}
+	},
 });
 </script>
 
 <style lang="scss">
-.staggered-fade-move {
-	transition: transform 0.7s !important;
+.staggered-move {
+	transition: all 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 {
+		opacity: 0;
+		transform: translateY(-64px);
+	}
+}
+
+.uupnnhew[data-reversed="true"] {
+	@for $i from 1 through 30 {
+		.staggered-enter-active:nth-last-child(#{$i}) {
+			transition: all 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}) {
+			transition: all 0.7s cubic-bezier(0.23, 1, 0.32, 1) (15ms * ($i - 1));
+		}
+	}
 }
 </style>