diff options
Diffstat (limited to 'src/components/TimelineList.vue')
| -rw-r--r-- | src/components/TimelineList.vue | 20 |
1 files changed, 19 insertions, 1 deletions
diff --git a/src/components/TimelineList.vue b/src/components/TimelineList.vue index 94d51935..9d405b16 100644 --- a/src/components/TimelineList.vue +++ b/src/components/TimelineList.vue @@ -22,7 +22,9 @@ <template> <div class="social__timeline"> - <timeline-entry v-for="entry in timeline" :key="entry.id" :item="entry" /> + <transition-group name="list" tag="div"> + <timeline-entry v-for="entry in timeline" :key="entry.id" :item="entry" /> + </transition-group> <infinite-loading ref="infiniteLoading" @infinite="infiniteHandler"> <div slot="spinner"> <div class="icon-loading" /> @@ -37,6 +39,22 @@ </div> </template> +<style scoped> + .list-item { + } + .list-enter-active, .list-leave-active { + transition: all .5s; + } + .list-enter { + opacity: 0; + transform: translateY(-30px); + } + .list-leave-to { + opacity: 0; + transform: translateX(-100px); + } +</style> + <script> import InfiniteLoading from 'vue-infinite-loading' import TimelineEntry from './../components/TimelineEntry' |