We read every piece of feedback, and take your input very seriously.
To see all available qualifiers, see our documentation.
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
I was reading your blog post https://gridsome.org/blog/2019/10/08/infinite-loading-with-gridsome/ and got it working, but can't seem to get the fade animation to work. Where would I place the following styles? I am using the default wordpress starter:
<template> <Layout> <div class="posts"> <transition-group name="fade"> <Post v-for="{ node } of loadedPosts" :key="node.id" :post="node" /> </transition-group> <ClientOnly> <infinite-loading @infinite="infiniteHandler" spinner="spiral"> <div slot="no-more"> You've scrolled through all the posts ;) </div> <div slot="no-results"> Sorry, no posts yet :( </div> </infinite-loading> </ClientOnly> </div> </Layout> </template> <page-query> query Home ($page: Int) { allWordPressPost (page: $page, perPage: 10) @paginate { pageInfo { totalPages currentPage } edges { node { id title date path excerpt } } } } </page-query> <script> // import { Pager } from 'gridsome' import Post from '~/components/Post.vue' export default { components: { // Pager, Post }, data() { return { loadedPosts: [], currentPage: 1 } }, metaInfo: { title: 'Welcome to my blog :)' }, created() { this.loadedPosts.push(...this.$page.allWordPressPost.edges) }, methods: { async infiniteHandler($state) { if (this.currentPage + 1 > this.$page.allWordPressPost.pageInfo.totalPages) { $state.complete() } else { const { data } = await this.$fetch( // `/blog/${this.currentPage + 1}` `/${this.currentPage + 1}` ) if (data.allWordPressPost.edges.length) { this.currentPage = data.allWordPressPost.pageInfo.currentPage this.loadedPosts.push(...data.allWordPressPost.edges) $state.loaded() } else { $state.complete() } } } } } </script> <style> .fade-enter-active, .fade-leave-active { transition: ease opacity 0.3s; } .fade-enter, .fade-leave-to { opacity: 0; } </style>
The text was updated successfully, but these errors were encountered:
@dosstx create a CSS file and import it in your main.js file here: https://github.com/gridsome/gridsome-starter-wordpress/blob/master/src/main.js
You can check out my demo main.js file here to compare: https://github.com/codybarr/gridsome-infinite-loading-demo/blob/master/src/main.js#L2
Sorry, something went wrong.
No branches or pull requests
I was reading your blog post https://gridsome.org/blog/2019/10/08/infinite-loading-with-gridsome/ and got it working, but can't seem to get the fade animation to work. Where would I place the following styles? I am using the default wordpress starter:
The text was updated successfully, but these errors were encountered: