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