From 60261d82195d59000fc3377f62dd19c34c322592 Mon Sep 17 00:00:00 2001
From: jolaleye <j.olaleye.o@gmail.com>
Date: Thu, 16 May 2019 09:51:19 -0500
Subject: [PATCH] Add grid shuffle transition

---
 components/Effects.vue | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/components/Effects.vue b/components/Effects.vue
index 1ec79cf..6974625 100644
--- a/components/Effects.vue
+++ b/components/Effects.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="grid">
+  <transition-group class="grid" tag="div" name="shuffle">
     <Effect
       v-for="effect in Object.values(this.effects)"
       :key="effect.name"
@@ -8,7 +8,7 @@
     >
       <component :is="effect.name"/>
     </Effect>
-  </div>
+  </transition-group>
 </template>
 
 <script>
@@ -33,6 +33,10 @@ export default {
   margin: 0 auto;
 }
 
+.shuffle-move {
+  transition: transform 0.75s ease-out;
+}
+
 // Responsive styles
 
 @media (min-width: "640px") {