github/dootask
1
0
Fork 0
mirror of https://github.com/kuaifan/dootask.git synced 2025-12-16 14:12:51 +00:00
Code Issues Packages Projects Releases Wiki Activity

perf: 优化动画样式

Browse Source
This commit is contained in:
kuaifan 2023-08-03 11:12:01 +08:00
parent f49f73409c
commit defd0d2361
2 changed files with 116 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
resources/assets/js/pages/manage/components/DialogModal.vue
View File

@ -67,8 +67,8 @@ export default {
methods: { methods: {
onBeforeClose() { onBeforeClose() {
return new Promise(resolve => { return new Promise(_ => {
resolve(this.$store.dispatch("openDialog", 0)) this.$store.dispatch("openDialog", 0)
}) })
}, },
} }

143
resources/assets/sass/components/mobile.scss vendored
View File

@ -242,76 +242,161 @@
// 渐见 // 渐见
.mobile-fade-enter-active { .mobile-fade-enter-active {
transition: all 0.2s ease; animation: mobile-fade-enter-animation 0.2s forwards;
} }
.mobile-fade-leave-active { .mobile-fade-leave-active {
transition: all 0.2s ease; animation: mobile-fade-leave-animation 0.2s backwards;
} }
.mobile-fade-enter, @keyframes mobile-fade-enter-animation {
.mobile-fade-leave-to { from {
opacity: 0; opacity: 0;
}
to {
opacity: 1;
}
}
@keyframes mobile-fade-leave-animation {
from {
opacity: 1;
}
to {
opacity: 0;
}
} }
// 底部划上 // 底部划上
.mobile-slide-enter-active { .mobile-slide-enter-active {
transition: all 0.2s ease; animation: mobile-slide-enter-animation 0.2s forwards;
} }
.mobile-slide-leave-active { .mobile-slide-leave-active {
transition: all 0.2s ease; animation: mobile-slide-leave-animation 0.2s backwards;
} }
.mobile-slide-enter, @keyframes mobile-slide-enter-animation {
.mobile-slide-leave-to { from {
transform: translate(0, 15%); transform: translate(0, 15%);
opacity: 0; opacity: 0;
}
to {
transform: translate(0, 0);
opacity: 1;
}
}
@keyframes mobile-slide-leave-animation {
from {
transform: translate(0, 0);
opacity: 1;
}
to {
transform: translate(0, 15%);
opacity: 0;
}
} }
// 通知（顶部划入） // 通知（顶部划入）
.mobile-notify-enter-active { .mobile-notify-enter-active {
transition: all 0.3s ease; animation: mobile-notify-enter-animation 0.3s forwards;
} }
.mobile-notify-leave-active { .mobile-notify-leave-active {
transition: all 0.3s ease; animation: mobile-notify-leave-animation 0.3s backwards;
} }
.mobile-notify-enter, @keyframes mobile-notify-enter-animation {
.mobile-notify-leave-to { from {
transform: translate(-50%, -100%); transform: translate3d(-50%, -100%, 0);
opacity: 0; opacity: 0;
}
to {
transform: translate3d(-50%, 0, 0);
opacity: 1;
}
}
@keyframes mobile-notify-leave-animation {
from {
transform: translate3d(-50%, 0, 0);
opacity: 1;
}
to {
transform: translate3d(-50%, -100%, 0);
opacity: 0;
}
} }
// 对话框（右侧划入） // 对话框（右侧划入）
.mobile-dialog-enter-active { .mobile-dialog-enter-active {
transition: all 0.3s ease; animation: mobile-dialog-enter-animation 0.3s forwards;
} }
.mobile-dialog-leave-active { .mobile-dialog-leave-active {
transition: all 0.3s ease; animation: mobile-dialog-leave-animation 0.3s backwards;
} }
.mobile-dialog-enter, @keyframes mobile-dialog-enter-animation {
.mobile-dialog-leave-to { from {
transform: translate(100%, 0); transform: translate3d(100%, 0, 0);
opacity: 0; opacity: 0;
}
to {
transform: translate3d(0%, 0, 0);
opacity: 1;
}
}
@keyframes mobile-dialog-leave-animation {
from {
transform: translate3d(0%, 0, 0);
opacity: 1;
}
to {
transform: translate3d(100%, 0, 0);
opacity: 0;
}
} }
// 录音发送（缩放） // 录音发送（缩放）
.mobile-send-enter-active { .mobile-send-enter-active {
transition: all 0.3s ease; animation: mobile-send-enter-animation 0.3s forwards;
} }
.mobile-send-leave-active { .mobile-send-leave-active {
transition: all 0.3s ease; animation: mobile-send-leave-animation 0.3s backwards;
} }
.mobile-send-enter, @keyframes mobile-send-enter-animation {
.mobile-send-leave-to { from {
transform: translate(-50%, -50%) scale(0) !important; transform: translate(-50%, -50%) scale(0);
opacity: 0; opacity: 0;
}
to {
transform: translate(-50%, -50%) scale(1);
opacity: 1;
}
}
@keyframes mobile-send-leave-animation {
from {
transform: translate(-50%, -50%) scale(1);
opacity: 1;
}
to {
transform: translate(-50%, -50%) scale(0);
opacity: 0;
}
} }
body.window-touch { body.window-touch {