github
/
halo-admin
mirror of https://github.com/halo-dev/halo-admin
1
0
Fork 0
Code Issues Releases Wiki Activity

refactor: modal component transition 

Signed-off-by: Ryan Wang <i@ryanc.cc>
pull/581/head
Ryan Wang 2022-05-16 12:39:35 +08:00
parent 22a558bf67
commit 49705b6a80
1 changed files with 34 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

43
src/components/base/modal/Modal.vue
View File

@ -41,25 +41,37 @@ function handleClose() {
</script> </script>
<template> <template>
<Teleport to="body"> <Teleport to="body">
<transition
enter-active-class="ease-out"
enter-from-class="opacity-0"
enter-to-class="opacity-100"
leave-active-class="ease-in"
leave-from-class="opacity-100"
leave-to-class="opacity-0"
>
<div <div
v-show="visible"
:class="wrapperClasses" :class="wrapperClasses"
aria-modal="true" aria-modal="true"
class="modal-wrapper transform transition-all duration-200" class="modal-wrapper"
role="dialog" role="dialog"
tabindex="0" tabindex="0"
@keyup.esc="handleClose()" @keyup.esc="handleClose()"
> >
<div class="modal-layer" @click="handleClose()" /> <transition
<div :style="contentStyles" class="modal-content"> enter-active-class="ease-out duration-200"
enter-from-class="opacity-0"
enter-to-class="opacity-100"
leave-active-class="ease-in duration-100"
leave-from-class="opacity-100"
leave-to-class="opacity-0"
>
<div v-show="visible" class="modal-layer" @click="handleClose()" />
</transition>
<transition
enter-active-class="ease-out duration-200"
enter-from-class="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
enter-to-class="opacity-100 translate-y-0 sm:scale-100"
leave-active-class="ease-in duration-100"
leave-from-class="opacity-100 translate-y-0 sm:scale-100"
leave-to-class="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
>
<div
v-show="visible"
:style="contentStyles"
class="modal-content transform transition-all"
>
<div class="modal-header"> <div class="modal-header">
<div class="modal-header-title">{{ title }}</div> <div class="modal-header-title">{{ title }}</div>
<div class="modal-header-actions"> <div class="modal-header-actions">
@ -75,8 +87,8 @@ function handleClose() {
<slot name="footer" /> <slot name="footer" />
</div> </div>
</div> </div>
</div>
</transition> </transition>
</div>
</Teleport> </Teleport>
</template> </template>
@ -94,8 +106,9 @@ function handleClose() {
@apply absolute; @apply absolute;
@apply top-0 left-0; @apply top-0 left-0;
@apply w-full h-full; @apply w-full h-full;
background: #9e9eaa; @apply transition-opacity;
opacity: 0.6; @apply bg-gray-500;
@apply bg-opacity-75;
} }
.modal-content { .modal-content {