From 9b0261d47a26c4ec64db448968a6e5cba6e3ef0a Mon Sep 17 00:00:00 2001
From: Tyler-A <tyler.akins1999@gmail.com>
Date: Fri, 7 Aug 2020 00:41:39 -0600
Subject: [PATCH] Add CSS animations for modal appear/disappear

---
 src/App.vue             |  1 +
 src/css/transitions.css | 62 +++++++++++++++++++++++++++++++++++++++++
 2 files changed, 63 insertions(+)
 create mode 100644 src/css/transitions.css

diff --git a/src/App.vue b/src/App.vue
index 90a42e2..985b1e2 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -75,6 +75,7 @@ export default {
 </script>
 
 <style>
+@import "./css/transitions.css";
 @import "./css/dark_theme.css";
 @import "./css/tooltips.css";
 @import "./css/inputs.css";
diff --git a/src/css/transitions.css b/src/css/transitions.css
new file mode 100644
index 0000000..0b543dd
--- /dev/null
+++ b/src/css/transitions.css
@@ -0,0 +1,62 @@
+/* Transition for modal background appearing/disappearing */
+.fade-enter-active, .fade-leave-active {
+	transition: opacity .5s;
+}
+
+.fade-enter, .fade-leave-to {
+	opacity: 0;
+}
+
+
+
+/* Transition for modal card appearing disappearing */
+.burst-enter-active {
+	animation: burst-in .5s;
+}
+.burst-leave-active { animation: burst-out .5s; }
+
+@keyframes burst-in {
+	0% {
+		transform: scale(0);
+	}
+	100% {
+		transform: scale(1);
+	}
+}
+
+@keyframes burst-out {
+	0% {
+		transform: scale(1);
+	}
+	100% {
+		transform: scale(0);
+	}
+}
+
+
+
+@media only screen and (min-width: 768px) {
+	@keyframes burst-in {
+		0% {
+			transform: scale(0);
+		}
+		50% {
+			transform: scale(1.25);
+		}
+		100% {
+			transform: scale(1);
+		}
+	}
+
+	@keyframes burst-out {
+		0% {
+			transform: scale(1);
+		}
+		50% {
+			transform: scale(1.25);
+		}
+		100% {
+			transform: scale(0);
+		}
+	}
+}
\ No newline at end of file