mirror of
https://github.com/kuaifan/dootask.git
synced 2026-03-04 08:17:04 +00:00
perf: 优化抖动提示
This commit is contained in:
parent
6a58f07a91
commit
937d996458
@ -934,7 +934,7 @@ export default {
|
||||
},
|
||||
|
||||
itemClassAdd(index) {
|
||||
return index === this.replyActiveIndex ? 'dialog-shake' : '';
|
||||
return index === this.replyActiveIndex ? 'common-shake' : '';
|
||||
},
|
||||
|
||||
inputFocus() {
|
||||
|
||||
@ -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)
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
|
||||
23
resources/assets/sass/pages/common.scss
vendored
23
resources/assets/sass/pages/common.scss
vendored
@ -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); }
|
||||
}
|
||||
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user