perf: 优化抖动提示

This commit is contained in:
kuaifan 2022-07-07 00:05:55 +08:00
parent 6a58f07a91
commit 937d996458
5 changed files with 38 additions and 25 deletions

View File

@ -934,7 +934,7 @@ export default {
},
itemClassAdd(index) {
return index === this.replyActiveIndex ? 'dialog-shake' : '';
return index === this.replyActiveIndex ? 'common-shake' : '';
},
inputFocus() {

View File

@ -816,6 +816,9 @@ export default {
const shareClass = row.share ? ' share' : '';
return h('div', {
class: `file-nbox${shearClass}`,
attrs: {
'data-id': row.id
}
}, [
h('div', {
class: `no-dark-before file-name file-icon ${row.type}${shareClass}`,
@ -1370,6 +1373,7 @@ export default {
this.$store.dispatch("saveFile", data);
if (isCreate) {
this.$store.dispatch("forgetFile", item.id);
this.shakeFile(data.id);
}
}).catch(({msg}) => {
$A.modalError(msg)
@ -1537,6 +1541,17 @@ export default {
this.shearIds = [];
},
shakeFile(fileId) {
this.$nextTick(_ => {
const dom = $A(this.$el).find(`[data-id="${fileId}"]`)
if (dom.length > 0) {
$A.scrollIntoViewIfNeeded(dom[0])
$A(dom[0]).addClass("common-shake")
setTimeout(_ => $A(dom[0]).removeClass("common-shake"), 800)
}
})
},
/********************拖动上传部分************************/
pasteDragNext(e, type) {
@ -1594,8 +1609,12 @@ export default {
},
pasteSend() {
const names = []
this.pasteFile.some(file => {
this.$refs.fileUpload.upload(file)
if (!names.find(name => name === file.name)) {
names.push(file.name)
this.$refs.fileUpload.upload(file)
}
});
},

View File

@ -652,17 +652,24 @@ body {
}
.icon-loading {
animation: icon-loading-load 0.6s infinite linear;
animation: animation-icon-loading 0.6s infinite linear;
}
@keyframes icon-loading-load {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
@keyframes animation-icon-loading {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
.common-shake {
animation: animation-common-shake 600ms ease-in-out;
animation-delay: 200ms;
}
@keyframes animation-common-shake {
10%, 90% { transform: translate3d(-1px, 0, 0); }
20%, 80% { transform: translate3d(+2px, 0, 0); }
30%, 70% { transform: translate3d(-4px, 0, 0); }
40%, 60% { transform: translate3d(+4px, 0, 0); }
50% { transform: translate3d(-4px, 0, 0); }
}

View File

@ -288,11 +288,6 @@
position: relative;
padding: 16px 32px 0;
.dialog-shake {
animation: ani-dialog-shake 600ms ease-in-out;
animation-delay: 200ms;
}
.dialog-item {
display: flex;
flex-direction: row;
@ -1235,14 +1230,6 @@
overflow: hidden !important;
}
@keyframes ani-dialog-shake {
10%, 90% { transform: translate3d(-1px, 0, 0); }
20%, 80% { transform: translate3d(+2px, 0, 0); }
30%, 70% { transform: translate3d(-4px, 0, 0); }
40%, 60% { transform: translate3d(+4px, 0, 0); }
50% { transform: translate3d(-4px, 0, 0); }
}
@media (max-width: 768px) {
.dialog-wrapper {
background-color: #f8f8f8;

View File

@ -427,7 +427,7 @@
cursor: pointer;
}
.ivu-icon-ios-loading {
animation: icon-loading-load 0.6s infinite linear;
animation: animation-icon-loading 0.6s infinite linear;
}
}
}
@ -450,7 +450,7 @@
margin-top: 6px;
&.loading {
.ivu-icon-ios-loading {
animation: icon-loading-load 0.6s infinite linear;
animation: animation-icon-loading 0.6s infinite linear;
}
}
}