From 50fa31ea988a5a8264b8b5c7843b6106ee3ee8ab Mon Sep 17 00:00:00 2001
From: Badri Sunderarajan <badrihippo@gmail.com>
Date: Mon, 9 Mar 2020 23:07:21 +0530
Subject: [PATCH] Animate infinite-scroll transitions

---
 src/pages/Index.vue | 42 ++++++++++++++++++++++++++----------------
 1 file changed, 26 insertions(+), 16 deletions(-)

diff --git a/src/pages/Index.vue b/src/pages/Index.vue
index e1cd868..faa69e9 100644
--- a/src/pages/Index.vue
+++ b/src/pages/Index.vue
@@ -23,23 +23,23 @@
     <!-- The main content area -->
     <main id="site-main" class="site-main outer">
       <div class="inner">
-        <div class="post-feed">
+        <transition-group name="fade" tag="div" class="post-feed">
           <Card v-for="{ node }, count in loadedPosts" :key="node.id" :cardData="node" :isLarge="count % 6 == 0 ? true : false" />
-          <ClientOnly>
-            <infinite-loading @infinite="infiniteHandler" spinner="spiral">
-              <div slot="no-more">
-                That's it! You've scrolled through all the articles.
-                Now, how about <a :href="/write/">writing one yourself</a>?
-              </div>
-              <div slot="no-results">
-                Sorry, no posts yet :(
-              </div>
-            </infinite-loading>
-          </ClientOnly>
-          <noscript>
-            <Pager :info="$page.posts.pageInfo" linkClass="button" style="height: 5rem; text-align:center;" />
-          </noscript>
-        </div>
+        </transition-group>
+        <ClientOnly>
+          <infinite-loading @infinite="infiniteHandler" spinner="spiral">
+            <div slot="no-more">
+              That's it! You've scrolled through all the articles.
+              Now, how about <a :href="/write/">writing one yourself</a>?
+            </div>
+            <div slot="no-results">
+              Sorry, no posts yet :(
+            </div>
+          </infinite-loading>
+        </ClientOnly>
+        <noscript>
+          <Pager :info="$page.posts.pageInfo" linkClass="button" style="height: 5rem; text-align:center;" />
+        </noscript>
       </div>
     </main>
   </Layout>
@@ -65,6 +65,16 @@
   padding: 2rem;
 }
 
+.fade-enter-active,
+.fade-leave-active {
+  transition: ease opacity 1s;
+}
+
+.fade-enter,
+.fade-leave-to {
+  opacity: 0;
+}
+
 </style>
 
 <script>