about summary refs log tree commit diff
diff options
context:
space:
mode:
authorPatryk Niedźwiedziński <pniedzwiedzinski19@gmail.com>2019-11-27 20:34:46 +0100
committerPatryk Niedźwiedziński <pniedzwiedzinski19@gmail.com>2019-11-27 20:34:46 +0100
commit6e66497bc3e8b00c3f7b741fe6c19d966f877a3b (patch)
tree7a5f0692727e6f65aee7f7f2d29fb016a63df312
parent6df360ef621cf5e3e8964fa9795bd0b2ae6aafae (diff)
downloadpuszcza-6e66497bc3e8b00c3f7b741fe6c19d966f877a3b.tar.gz
puszcza-6e66497bc3e8b00c3f7b741fe6c19d966f877a3b.zip
Add fade transition to post list
-rw-r--r--components/PostList/PurePostList.vue35
1 files changed, 25 insertions, 10 deletions
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