Add grid shuffle transition

fakegit · May 16, 2019 · 60261d8 · 60261d8
1 parent c72e94a
commit 60261d8
Showing 1 changed file with 6 additions and 2 deletions.
diff --git 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") {