Added Animations

ashishkrtewari · Feb 29, 2020 · 02efd6a · 02efd6a
1 parent d42c12c
commit 02efd6a
Show file tree

Hide file tree

Showing 3 changed files with 30 additions and 18 deletions.
diff --git a/src/components/PostItem.vue b/src/components/PostItem.vue
@@ -1,5 +1,5 @@
 <template>
-  <section>
+  <transition-group name="list-item" tag="section">
     <div
       class="bg-white grid grid-cols-12 items-center mb-2 px-3 py-2 post-item rounded shadow-md"
       :key="post.id"
@@ -30,7 +30,7 @@
         </button>
       </div>
     </div>
-  </section>
+  </transition-group>
 </template>
 
 <script>
@@ -56,4 +56,7 @@ export default Vue.extend({
 .post-item {
   min-height: 5.5rem;
 }
+.list-item-move {
+  transition: transform 0.3 cubic-bezier(1.0, 0.5, 0.8, 1.0);
+}
 </style>
diff --git a/src/components/TimeTravel.vue b/src/components/TimeTravel.vue
@@ -2,22 +2,24 @@
   <div class="animate-slide-in col-start-2 col-span-8 md:col-span-6 mt-10 md:mt-0 md:mr-10">
     <h2 class="bg-white p-5 text-dark-grey text-2xl">List of actions commited</h2>
     <div class="bg-light-grey mb-2 p-4 shadow-md" v-if="changesList.length">
-      <div
-        class="bg-white border-light-grey flex items-center justify-between list-item p-3 shadow-md"
-        :key="index"
-        v-for="(entry, index) of changesList"
-      >
-        <h4 class="text-left text-dark-grey col-span-8 pr-3">
-          {{entry.message}}
-        </h4>
-        <button
-          @click="timeTravel({index})"
-          class="bg-spring-green col-span-4 flex-shrink-0 h-10 px-3 py-2 rounded text-dark-grey"
-          aria-label="time travel"
+      <transition-group name="list" tag="div">
+        <div
+          class="bg-white border-light-grey flex items-center justify-between list-item p-3 shadow-md"
+          :key="entry.timeStamp"
+          v-for="(entry, index) of changesList"
         >
-          Time Travel
-        </button>
-      </div>
+          <h4 class="text-left text-dark-grey col-span-8 pr-3">
+            {{entry.message}}
+          </h4>
+          <button
+            @click="timeTravel({index})"
+            class="bg-spring-green col-span-4 flex-shrink-0 h-10 px-3 py-2 rounded text-dark-grey"
+            aria-label="time travel"
+          >
+            Time Travel
+          </button>
+        </div>
+      </transition-group>
     </div>
     <div v-else class="bg-light-grey mb-2 p-4 shadow-md">
       <p>
@@ -52,5 +54,12 @@ export default Vue.extend({
 .list-item:not(:last-of-type) {
   border-bottom-width: 2px;
 }
+.list-enter-active, .list-leave-active {
+  transition: all 0.3s cubic-bezier(1.0, 0.5, 0.8, 1.0);
+}
+.list-enter, .list-leave-to {
+  opacity: 0;
+  transform: translateY(-30px);
+}
 
 </style>
diff --git a/src/store/actions.js b/src/store/actions.js
@@ -37,7 +37,7 @@ export default {
     const newEntry = {
       posts,
       message: `Moved "Post ${post.id}" from index ${index} to index ${newIndex}`,
-      timestamp: Date.now()
+      timeStamp: Date.now()
     }
     commit('UPDATE_CHANGES_LIST', newEntry)
   },