From 6e66497bc3e8b00c3f7b741fe6c19d966f877a3b Mon Sep 17 00:00:00 2001
From: Patryk Niedźwiedziński <pniedzwiedzinski19@gmail.com>
Date: Wed, 27 Nov 2019 20:34:46 +0100
Subject: Add fade transition to post list

---
 components/PostList/PurePostList.vue | 35 +++++++++++++++++++++++++----------
 1 file changed, 25 insertions(+), 10 deletions(-)

(limited to 'components/PostList/PurePostList.vue')

diff --git a/components/PostList/PurePostList.vue b/components/PostList/PurePostList.vue
index 7e70db8..07883ad 100644
--- a/components/PostList/PurePostList.vue
+++ b/components/PostList/PurePostList.vue
@@ -3,16 +3,18 @@
     <div v-if="loading" class="post-list-container">
       <div class="loading-post" v-for="(_, index) in 4" :key="index"></div>
     </div>
-    <div v-else-if="posts" class="post-list-container">
-      <post-link
-        v-for="(post, index) in posts"
-        :key="index"
-        :route="post.route"
-        :title="post.title"
-        :description="post.description"
-      />
-    </div>
-    <div v-else class="no-posts">Brak wpisów</div>
+    <div v-else-if="!posts" class="no-posts">Brak wpisów</div>
+    <transition name="fade-in">
+      <div v-if="posts && !loading" class="post-list-container">
+        <post-link
+          v-for="(post, index) in posts"
+          :key="index"
+          :route="post.route"
+          :title="post.title"
+          :description="post.description"
+        />
+      </div>
+    </transition>
   </div>
 </template>
 
@@ -73,4 +75,17 @@ export default {
 .no-posts {
   text-align: center;
 }
+
+@keyframes fade-in {
+  0% {
+    opacity: 1;
+  }
+  100% {
+    opacity: 0;
+  }
+}
+
+.fade-in-enter-active {
+  animation: fade-in 0.3s reverse;
+}
 </style>
\ No newline at end of file
-- 
cgit 1.4.1