add transition effect to notification and list

This commit is contained in:
nasum 2018-04-23 19:03:47 +09:00
parent a63cfd623c
commit 63f5531d80
2 changed files with 12 additions and 6 deletions

View File

@ -1,9 +1,11 @@
<template>
<div name="lists" id="lists">
<div class="unread">{{ unread.length > 0 ? unread.length : '' }}</div>
<div class="list-timeline" v-for="message in timeline" v-bind:key="message.id">
<toot :message="message" v-on:update="updateToot"></toot>
</div>
<transition-group name="timeline" tag="div">
<div class="list-timeline" v-for="message in timeline" v-bind:key="message.id">
<toot :message="message" v-on:update="updateToot"></toot>
</div>
</transition-group>
<div class="loading-card" v-loading="lazyLoading" :element-loading-background="backgroundColor"></div>
</div>
</template>
@ -132,3 +134,4 @@ export default {
}
}
</style>
<style src="@/assets/timeline-transition.scss"></style>

View File

@ -1,9 +1,11 @@
<template>
<div id="notifications">
<div class="unread">{{ unread.length > 0 ? unread.length : '' }}</div>
<div class="notifications" v-for="message in notifications" v-bind:key="message.id">
<notification :message="message"></notification>
</div>
<transition-group name="timeline" tag="div">
<div class="notifications" v-for="message in notifications" v-bind:key="message.id">
<notification :message="message"></notification>
</div>
</transition-group>
<div class="loading-card" v-loading="lazyLoading" :element-loading-background="backgroundColor">
</div>
</div>
@ -91,3 +93,4 @@ export default {
}
}
</style>
<style src="@/assets/timeline-transition.scss"></style>