Browse Source

refactor(nc-gui): overlay transition

pull/3801/head
braks 2 years ago
parent
commit
3e7ece9ccf
  1. 21
      packages/nc-gui/components/general/Overlay.vue

21
packages/nc-gui/components/general/Overlay.vue

@ -43,16 +43,27 @@ export default {
<template> <template>
<teleport :disabled="teleportDisabled || (inline && !target)" :to="target || 'body'"> <teleport :disabled="teleportDisabled || (inline && !target)" :to="target || 'body'">
<Transition :name="transition ? 'fade' : undefined" mode="out-in">
<div <div
v-show="!!vModel"
v-bind="$attrs" v-bind="$attrs"
:class="[ :class="[inline ? 'absolute' : 'fixed']"
vModel ? 'opacity-100' : 'opacity-0 pointer-events-none',
inline ? 'absolute' : 'fixed',
transition ? 'transition-opacity duration-200 ease-in-out' : '',
]"
class="z-100 top-0 left-0 bottom-0 right-0 bg-gray-700/75" class="z-100 top-0 left-0 bottom-0 right-0 bg-gray-700/75"
> >
<slot :is-open="vModel" /> <slot :is-open="vModel" />
</div> </div>
</Transition>
</teleport> </teleport>
</template> </template>
<style scoped>
.fade-enter-active,
.fade-leave-active {
transition: opacity 0.3s;
}
.fade-enter,
.fade-leave-to {
opacity: 0;
}
</style>

Loading…
Cancel
Save