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

14
src/pages/Index.vue
View file

@ -23,8 +23,9 @@
<!-- 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" />
</transition-group>
<ClientOnly> <ClientOnly>
<infinite-loading @infinite="infiniteHandler" spinner="spiral"> <infinite-loading @infinite="infiniteHandler" spinner="spiral">
<div slot="no-more"> <div slot="no-more">
@ -40,7 +41,6 @@
<Pager :info="$page.posts.pageInfo" linkClass="button" style="height: 5rem; text-align:center;" /> <Pager :info="$page.posts.pageInfo" linkClass="button" style="height: 5rem; text-align:center;" />
</noscript> </noscript>
</div> </div>
</div>
</main> </main>
</Layout> </Layout>
</template> </template>
@ -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>