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 --> <!-- The main content area -->
<main id="site-main" class="site-main outer"> <main id="site-main" class="site-main outer">
<div class="inner"> <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" /> <Card v-for="{ node }, count in loadedPosts" :key="node.id" :cardData="node" :isLarge="count % 6 == 0 ? true : false" />
<ClientOnly> </transition-group>
<infinite-loading @infinite="infiniteHandler" spinner="spiral"> <ClientOnly>
<div slot="no-more"> <infinite-loading @infinite="infiniteHandler" spinner="spiral">
That's it! You've scrolled through all the articles. <div slot="no-more">
Now, how about <a :href="/write/">writing one yourself</a>? That's it! You've scrolled through all the articles.
</div> Now, how about <a :href="/write/">writing one yourself</a>?
<div slot="no-results"> </div>
Sorry, no posts yet :( <div slot="no-results">
</div> Sorry, no posts yet :(
</infinite-loading> </div>
</ClientOnly> </infinite-loading>
<noscript> </ClientOnly>
<Pager :info="$page.posts.pageInfo" linkClass="button" style="height: 5rem; text-align:center;" /> <noscript>
</noscript> <Pager :info="$page.posts.pageInfo" linkClass="button" style="height: 5rem; text-align:center;" />
</div> </noscript>
</div> </div>
</main> </main>
</Layout> </Layout>
@ -65,6 +65,16 @@
padding: 2rem; padding: 2rem;
} }
.fade-enter-active,
.fade-leave-active {
transition: ease opacity 1s;
}
.fade-enter,
.fade-leave-to {
opacity: 0;
}
</style> </style>
<script> <script>