Nebucatnetzer
/
find_coach
Archived
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

add animation to the BaseDialog

This commit is contained in:
Andreas Zweili 2021-07-28 20:57:45 +02:00
parent c5bb1139f8
commit d0d3c40151
1 changed files with 44 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

66
src/components/ui/BaseDialog.vue
View File

@ -1,21 +1,23 @@
<template> <template>
<teleport to="body"> <teleport to="body">
<div v-if="show" @click="tryClose" class="backdrop"></div> <div v-if="show" @click="tryClose" class="backdrop"></div>
<dialog open v-if="show"> <transition name="dialog">
<header> <dialog open v-if="show">
<slot name="header"> <header>
<h2>{{ title }}</h2> <slot name="header">
</slot> <h2>{{ title }}</h2>
</header> </slot>
<section> </header>
<slot></slot> <section>
</section> <slot></slot>
<menu v-if="!fixed"> </section>
<slot name="actions"> <menu v-if="!fixed">
<base-button @click="tryClose">Close</base-button> <slot name="actions">
</slot> <base-button @click="tryClose">Close</base-button>
</menu> </slot>
</dialog> </menu>
</dialog>
</transition>
</teleport> </teleport>
</template> </template>
@ -24,17 +26,17 @@ export default {
props: { props: {
show: { show: {
type: Boolean, type: Boolean,
required: true, required: true
}, },
title: { title: {
type: String, type: String,
required: false, required: false
}, },
fixed: { fixed: {
type: Boolean, type: Boolean,
required: false, required: false,
default: false, default: false
}, }
}, },
emits: ['close'], emits: ['close'],
methods: { methods: {
@ -43,8 +45,8 @@ export default {
return; return;
} }
this.$emit('close'); this.$emit('close');
}, }
}, }
}; };
</script> </script>
@ -96,10 +98,30 @@ menu {
margin: 0; margin: 0;
} }
.dialog-enter-from,
.dialog-leave-to {
opacity: 0;
transform: scale(0.8);
}
.dialog-enter-active {
transition: all 0.2s ease-out;
}
.dialog-leave-active {
transition: all 0.2s ease-in;
}
.dialog-enter-to,
.dialog-leave-from {
opacity: 1;
transform: scale(1);
}
@media (min-width: 768px) { @media (min-width: 768px) {
dialog { dialog {
left: calc(50% - 20rem); left: calc(50% - 20rem);
width: 40rem; width: 40rem;
} }
} }
</style> </style>