Add transition animation on adding area

miyaoka · Jan 4, 2018 · 2ec63c3 · 2ec63c3
1 parent 592c24d
commit 2ec63c3
Showing 1 changed file with 14 additions and 3 deletions.
diff --git a/components/GridLayoutContent.vue b/components/GridLayoutContent.vue
@@ -1,12 +1,14 @@
 <template>
-  <section
+  <transition-group
+    name="area"
+    tag="section"
     class="grid"
     :style="gridStyle"
     :class="{ 'is-combinable': isCombinable }"
   >
     <div
       v-for="(area, i) in uniqueAreaKeys"
-      :key="i"
+      :key="area"
       :style="{'grid-area': area }"
       class="grid-cell"
       :class="{selected: selectedAreaMap[area]}"
@@ -27,7 +29,7 @@
         @click="combineArea({area})"
       >Combine</button>
     </div>
-  </section>
+  </transition-group>
 </template>
 
 <script lang="ts">
@@ -86,4 +88,13 @@ export default {
 .focus-input {
   font-size: 20px;
 }
+
+.area-enter-active {
+  transition: .2s ease-out;
+}
+.area-enter {
+  opacity: 0.5;
+  transform: scale(0.2);
+}
+
 </style>