heartles/egirlskey
1
0
Fork 0
Code Issues 1 Pull requests Projects Releases Packages Wiki Activity

fix MkModal animation

Browse source
This commit is contained in:
syuilo 2023-01-08 11:47:16 +09:00
parent 244ea9593a
commit 192add376c
1 changed files with 17 additions and 13 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

30
packages/frontend/src/components/MkModal.vue
View file

@ -63,6 +63,7 @@ let transformOrigin = $ref('center');
let showing = $ref(true); let showing = $ref(true);
let content = $shallowRef<HTMLElement>(); let content = $shallowRef<HTMLElement>();
const zIndex = os.claimZIndex(props.zPriority); const zIndex = os.claimZIndex(props.zPriority);
let useSendAnime = $ref(false);
const type = $computed<ModalTypes>(() => { const type = $computed<ModalTypes>(() => {
if (props.preferType === 'auto') { if (props.preferType === 'auto') {
if (!defaultStore.state.disableDrawer && isTouchUsing && deviceKind === 'smartphone') { if (!defaultStore.state.disableDrawer && isTouchUsing && deviceKind === 'smartphone') {
@ -76,29 +77,32 @@ const type = $computed<ModalTypes>(() => {
}); });
let transitionName = $computed((() => let transitionName = $computed((() =>
defaultStore.state.animation defaultStore.state.animation
? (type === 'drawer') ? useSendAnime
? 'modal-drawer' ? 'send'
: (type === 'popup') : type === 'drawer'
? 'modal-popup' ? 'modal-drawer'
: 'modal' : type === 'popup'
? 'modal-popup'
: 'modal'
: '' : ''
)); ));
let transitionDuration = $computed((() => let transitionDuration = $computed((() =>
transitionName === 'modal-popup' transitionName === 'send'
? 100 ? 400
: transitionName === 'modal' : transitionName === 'modal-popup'
? 200 ? 100
: transitionName === 'modal-drawer' : transitionName === 'modal'
? 200 ? 200
: 0 : transitionName === 'modal-drawer'
? 200
: 0
)); ));
let contentClicking = false; let contentClicking = false;
function close(opts: { useSendAnimation?: boolean } = {}) { function close(opts: { useSendAnimation?: boolean } = {}) {
if (opts.useSendAnimation) { if (opts.useSendAnimation) {
transitionName = 'send'; useSendAnime = true;
transitionDuration = 400;
} }
// eslint-disable-next-line vue/no-mutating-props // eslint-disable-next-line vue/no-mutating-props