Zergling_man/thedesk
Zergling_man/thedesk
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Add fade animation to overlay comp

Browse Source
This commit is contained in:
kPherox 2019-04-24 00:04:29 +09:00
parent 38657ce31a
commit c7446fd49f
No known key found for this signature in database
GPG Key ID: C04751C2BFA2F62D
1 changed files with 17 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
src/components/globals/BaseOverlay.vue
View File

@ -1,11 +1,13 @@
<template>
<div class="overlay">
<button type="button" class="close-button" @click="closeOverlay">x</button>
<h1>{{ title }}</h1>
<div class="overlay-inner">
<slot/>
<transition name="fade">
<div class="overlay">
<button type="button" class="close-button" @click="closeOverlay">x</button>
<h1>{{ title }}</h1>
<div class="overlay-inner">
<slot/>
</div>
</div>
</div>
</transition>
</template>
<script lang="ts">
@ -25,13 +27,21 @@ export default class BaseOverlay extends Vue {
</script>
<style scoped lang="postcss">
.fade-enter-active,
.fade-leave-active {
transition: opacity 0.5s;
}
.fade-enter,
.fade-leave-to {
opacity: 0;
}
.overlay {
position: absolute;
top: 50%;
transform: translateY(-50%);
background-color: var(--bg-color);
width: 100vw;
height: 100vh;
background-color: var(--bg-color);
}
.overlay-inner {
margin: 1em;