zynfly/sqliteviz
1
0
Fork 0
mirror of https://github.com/lana-k/sqliteviz.git synced 2025-12-07 02:28:54 +08:00
Code Issues Projects Releases Wiki Activity

add hidden state for file in animation

Browse Source
This commit is contained in:
lana-k
2021-05-06 15:17:15 +02:00
parent 653f8eff7b
commit 7574f529c3
1 changed files with 9 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
src/components/DbUploader/index.vue
View File

@@ -26,7 +26,8 @@
ref="fileImg" ref="fileImg"
:class="{ :class="{
'swing': state === 'dragover', 'swing': state === 'dragover',
'fly': state === 'drop' 'fly': state === 'dropping',
'hidden': state === 'dropped'
}" }"
:src="require('@/assets/images/file.png')" :src="require('@/assets/images/file.png')"
/> />
@@ -196,6 +197,7 @@ export default {
this.animationPromise = new Promise((resolve) => { this.animationPromise = new Promise((resolve) => {
this.$refs.fileImg.addEventListener('animationend', event => { this.$refs.fileImg.addEventListener('animationend', event => {
if (event.animationName.startsWith('fly')) { if (event.animationName.startsWith('fly')) {
this.state = 'dropped'
resolve() resolve()
} }
}) })
@@ -387,7 +389,7 @@ export default {
}, },
async checkFile (file) { async checkFile (file) {
this.state = 'drop' this.state = 'dropping'
if (csvMimeTypes.includes(file.type)) { if (csvMimeTypes.includes(file.type)) {
this.file = file this.file = file
this.header = true this.header = true
@@ -519,6 +521,11 @@ export default {
left: 225px; left: 225px;
} }
} }
#file-img.hidden {
display: none;
}
/* Parse CSV dialog */ /* Parse CSV dialog */
.chars { .chars {
display: flex; display: flex;