Animate infinite-scroll transitions

src/pages/Index.vue

@@ -23,8 +23,9 @@
     <!-- 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" />
+        </transition-group>
         <ClientOnly>
           <infinite-loading @infinite="infiniteHandler" spinner="spiral">
             <div slot="no-more">
@@ -40,7 +41,6 @@
           <Pager :info="$page.posts.pageInfo" linkClass="button" style="height: 5rem; text-align:center;" />
         </noscript>
       </div>
-      </div>
     </main>
   </Layout>
 </template>
@@ -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>