diff options
| author | syuilo <Syuilotan@yahoo.co.jp> | 2020-02-06 17:02:32 +0900 |
|---|---|---|
| committer | syuilo <Syuilotan@yahoo.co.jp> | 2020-02-06 17:02:32 +0900 |
| commit | 6857153367231c893c81bf6c053dc4bee0d0a8d4 (patch) | |
| tree | d35db06ac5617b047d66e9d2e782ab4f0f005cae /src/client/components | |
| parent | Update sequential-entrance.vue (diff) | |
| download | misskey-6857153367231c893c81bf6c053dc4bee0d0a8d4.tar.gz misskey-6857153367231c893c81bf6c053dc4bee0d0a8d4.tar.bz2 misskey-6857153367231c893c81bf6c053dc4bee0d0a8d4.zip | |
Fix bug
Diffstat (limited to 'src/client/components')
| -rw-r--r-- | src/client/components/sequential-entrance.vue | 32 |
1 files changed, 11 insertions, 21 deletions
diff --git a/src/client/components/sequential-entrance.vue b/src/client/components/sequential-entrance.vue index 786ff0c874..bf2c2f38f3 100644 --- a/src/client/components/sequential-entrance.vue +++ b/src/client/components/sequential-entrance.vue @@ -34,40 +34,30 @@ export default Vue.extend({ default: false } }, - data() { - return { - currentChildren: [] as Node[], - index: 0 - }; - }, + i: 0, methods: { - updateChildren() { - this.currentChildren = this.$slots.default!.filter(n => n.elm != null).map(n => n.elm!); - }, beforeEnter(el) { el.style.opacity = 0; el.style.transform = this.direction === 'down' ? 'translateY(-64px)' : 'translateY(64px)'; + let index = this.$options.i; + const delay = this.delay * index; + 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++; }, enter(el, done) { - let index = this.index; - // TODO - //if (this.reversed) index = ...; - //console.log(index); - el.style.transition = [getComputedStyle(el).transition, 'transform 0.7s cubic-bezier(0.23, 1, 0.32, 1)', 'opacity 0.7s cubic-bezier(0.23, 1, 0.32, 1)'].filter(x => x != '').join(','); setTimeout(() => { el.style.opacity = 1; el.style.transform = 'translateY(0px)'; - setTimeout(() => { + el.addEventListener('transitionend', () => { + el.style.transition = ''; + this.$options.i--; done(); - this.index--; - }, 700); - }, this.delay * index) - this.index++; + }, { once: true }); + }); }, - leave(el, done) { + leave(el) { el.style.opacity = 0; el.style.transform = this.direction === 'down' ? 'translateY(64px)' : 'translateY(-64px)'; - setTimeout(done, 700); }, focus() { this.$slots.default[0].elm.focus(); |