amechama/sharkey
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

🎨

Browse Source
This commit is contained in:
syuilo 2023-01-08 09:58:35 +09:00
parent 1b7043fa79
commit 8709574f3d
2 changed files with 21 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
packages/frontend/src/components/MkContextMenu.vue
View File

@ -74,7 +74,7 @@ function onMousedown(evt: Event) {
} }
.fade-enter-active, .fade-leave-active { .fade-enter-active, .fade-leave-active {
transition: opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1), transform 0.5s cubic-bezier(0.16, 1, 0.3, 1); transition: opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1), transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
transform-origin: left top; transform-origin: left top;
} }

24
packages/frontend/src/components/MkModal.vue
View File

@ -74,8 +74,24 @@ const type = $computed<ModalTypes>(() => {
return props.preferType!; return props.preferType!;
} }
}); });
let transitionName = $ref(defaultStore.state.animation ? (type === 'drawer') ? 'modal-drawer' : (type === 'popup') ? 'modal-popup' : 'modal' : ''); let transitionName = $computed((() =>
let transitionDuration = $ref(defaultStore.state.animation ? 200 : 0); defaultStore.state.animation
? (type === 'drawer')
? 'modal-drawer'
: (type === 'popup')
? 'modal-popup'
: 'modal'
: ''
));
let transitionDuration = $computed((() =>
transitionName === 'modal-popup'
? 100
: transitionName === 'modal'
? 200
: transitionName === 'modal-drawer'
? 200
: 0
));
let contentClicking = false; let contentClicking = false;
@ -308,12 +324,12 @@ defineExpose({
.modal-popup-enter-active, .modal-popup-leave-active { .modal-popup-enter-active, .modal-popup-leave-active {
> .bg { > .bg {
transition: opacity 0.2s !important; transition: opacity 0.1s !important;
} }
> .content { > .content {
transform-origin: var(--transformOrigin); transform-origin: var(--transformOrigin);
transition: opacity 0.2s cubic-bezier(0, 0, 0.2, 1), transform 0.2s cubic-bezier(0, 0, 0.2, 1) !important; transition: opacity 0.1s cubic-bezier(0, 0, 0.2, 1), transform 0.1s cubic-bezier(0, 0, 0.2, 1) !important;
} }
} }
.modal-popup-enter-from, .modal-popup-leave-to { .modal-popup-enter-from, .modal-popup-leave-to {