Add animation on modal open/close

This commit is contained in:
Samuel Elliott 2018-02-03 21:52:56 +00:00
parent a97682b2a4
commit 21025e759e
No known key found for this signature in database
GPG Key ID: 8420C7CDE43DC4D6
4 changed files with 48 additions and 10 deletions

View File

@ -69,6 +69,25 @@
}
}
@keyframes bd-modal-in {
0% { transform: scale(0.8); opacity: 0; }
90% { transform: scale(1.01); opacity: 1; }
100% { transform: scale(1); opacity: 1; }
}
@keyframes bd-modal-out {
0% { transform: scale(1); opacity: 1; }
10% { transform: scale(1.01); opacity: 1; }
90% { opacity: 0; }
100% { transform: scale(0.8); opacity: 0; }
}
@keyframes bd-backdrop-in {
0% { opacity: 0; }
}
@keyframes bd-backdrop-out {
100% { opacity: 0; }
}
@keyframes bd-warn-shake {
10%, 90% {
transform: translate3d(-4px, -4px, 0);
@ -85,4 +104,4 @@
40%, 60% {
transform: translate3d(4px, -4px, 0);
}
}
}

View File

@ -8,6 +8,11 @@
opacity: .85;
padding: 20px;
z-index: 9000;
animation: bd-backdrop-in 0.22s ease;
&.bd-backdrop-out {
animation: bd-backdrop-out 0.22s ease;
}
}
.bd-modal {
@ -31,6 +36,11 @@
box-sizing: border-box;
pointer-events: none;
z-index: 9001;
animation: bd-modal-in 0.22s ease;
&.bd-modal-out {
animation: bd-modal-out 0.22s ease;
}
}
.bd-modal .bd-modal-inner {
@ -139,4 +149,4 @@
}
}
}
}
}

View File

@ -10,8 +10,8 @@
<template>
<div>
<div class="bd-backdrop" @click="attemptToClose"></div>
<Modal :headerText="plugin.name + ' Settings'" :close="attemptToClose">
<div class="bd-backdrop" :class="{'bd-backdrop-out': closing}" @click="attemptToClose"></div>
<Modal :headerText="plugin.name + ' Settings'" :close="attemptToClose" :class="{'bd-modal-out': closing}">
<div slot="body" class="bd-plugin-settings-body">
<template v-for="category in configCache">
<div v-if="category.category === 'default' || !category.type">
@ -50,7 +50,8 @@
return {
changed: false,
warnclose: false,
configCache: []
configCache: [],
closing: false
}
},
components: {
@ -88,7 +89,14 @@
this.changed = false;
},
attemptToClose(e) {
if (!this.changed) return this.close();
if (!this.changed) {
this.closing = true;
window.setTimeout(() => {
this.close();
}, 200);
return;
}
this.warnclose = true;
setTimeout(() => {
this.warnclose = false;

View File

@ -15,13 +15,13 @@
<div class="bd-flex-grow bd-button" :class="{'bd-active': local}" @click="showLocal">
<h3>Local</h3>
<div class="bd-material-button" @click="refreshLocal">
<refresh />
<MiRefresh />
</div>
</div>
<div class="bd-flex-grow bd-button" :class="{'bd-active': !local}" @click="showOnline">
<h3>Online</h3>
<div class="bd-material-button">
<refresh />
<MiRefresh />
</div>
</div>
</div>
@ -42,7 +42,7 @@
import { SettingsWrapper } from './';
import PluginCard from './PluginCard.vue';
import PluginSettingsModal from './PluginSettingsModal.vue';
import Refresh from 'vue-material-design-icons/refresh.vue';
import { MiRefresh } from '../common';
export default {
data() {
@ -53,7 +53,8 @@
}
},
components: {
SettingsWrapper, PluginCard, PluginSettingsModal, Refresh
SettingsWrapper, PluginCard, PluginSettingsModal,
MiRefresh
},
methods: {
showLocal() {