diff options
Diffstat (limited to 'components')
| -rw-r--r-- | components/PostList/PurePostList.vue | 35 |
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 |