snipette/snipette-gridsome
snipette/snipette-gridsome
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Animate infinite-scroll transitions

Browse source
This commit is contained in:
Badri Sunderarajan 2020-03-09 23:07:21 +05:30
parent 91f8268193
commit 50fa31ea98
1 changed files with 26 additions and 16 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

42
src/pages/Index.vue
View file

@ -23,23 +23,23 @@
<!-- 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" />
<ClientOnly>
<infinite-loading @infinite="infiniteHandler" spinner="spiral">
<div slot="no-more">
That's it! You've scrolled through all the articles.
Now, how about <a :href="/write/">writing one yourself</a>?
</div>
<div slot="no-results">
Sorry, no posts yet :(
</div>
</infinite-loading>
</ClientOnly>
<noscript>
<Pager :info="$page.posts.pageInfo" linkClass="button" style="height: 5rem; text-align:center;" />
</noscript>
</div>
</transition-group>
<ClientOnly>
<infinite-loading @infinite="infiniteHandler" spinner="spiral">
<div slot="no-more">
That's it! You've scrolled through all the articles.
Now, how about <a :href="/write/">writing one yourself</a>?
</div>
<div slot="no-results">
Sorry, no posts yet :(
</div>
</infinite-loading>
</ClientOnly>
<noscript>
<Pager :info="$page.posts.pageInfo" linkClass="button" style="height: 5rem; text-align:center;" />
</noscript>
</div>
</main>
</Layout>
@ -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>