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>