Add inspection modal transition

fakegit · May 16, 2019 · af520f9 · af520f9
1 parent 66470e8
commit af520f9
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 3 deletions.
diff --git a/components/Inspect.vue b/components/Inspect.vue
@@ -55,7 +55,6 @@ export default {
   left: 0;
   width: 100vw;
   height: 100vh;
-  background-color: hsla(0, 0%, 0%, 0.4);
   padding: 2em;
 }
 

diff --git a/pages/index.vue b/pages/index.vue
@@ -5,7 +5,10 @@
     <Header/>
     <CarbonAd/>
     <Effects :effects="effects" @inspect="inspect"/>
-    <Inspect v-if="inspecting" :src="inspectSrc" @close="closeInspect"/>
+    <div class="inspect-bg" v-if="inspecting"></div>
+    <transition name="inspect">
+      <Inspect v-if="inspecting" :src="inspectSrc" @close="closeInspect"/>
+    </transition>
     <Controls @shuffle="shuffle" @reset="reset" @filter="filter"/>
   </div>
 </template>
@@ -61,5 +64,24 @@ export default {
     hsl(341, 100%, 55%)
   );
 }
-</style>
 
+.inspect-bg {
+  z-index: 998;
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100vw;
+  height: 100vh;
+  background-color: hsla(0, 0%, 0%, 0.4);
+}
+
+.inspect-enter-active,
+.inspect-leave-active {
+  transition: all 0.25s ease-in-out;
+}
+.inspect-enter,
+.inspect-leave-to {
+  opacity: 0;
+  transform: scale(0);
+}
+</style>