add transition effect to notification and list
This commit is contained in:
parent
a63cfd623c
commit
63f5531d80
|
@ -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>
|
||||
|
|
|
@ -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>
|
||||
|
|
Loading…
Reference in New Issue