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>