add transition effect to timeline
This commit is contained in:
parent
35b2f1ea52
commit
a63cfd623c
|
@ -0,0 +1,9 @@
|
||||||
|
.timeline-enter-active, .timeline-leave-active {
|
||||||
|
transition: all 0.1s;
|
||||||
|
}
|
||||||
|
.timeline-enter, .timeline-leave-to {
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
.timeline-move {
|
||||||
|
transition: transform 0.1s;
|
||||||
|
}
|
|
@ -1,9 +1,11 @@
|
||||||
<template>
|
<template>
|
||||||
<div id="home">
|
<div id="home">
|
||||||
<div class="unread">{{ unread.length > 0 ? unread.length : '' }}</div>
|
<div class="unread">{{ unread.length > 0 ? unread.length : '' }}</div>
|
||||||
|
<transition-group name="timeline" tag="div">
|
||||||
<div class="home-timeline" v-for="(message, index) in timeline" v-bind:key="index">
|
<div class="home-timeline" v-for="(message, index) in timeline" v-bind:key="index">
|
||||||
<toot :message="message" :key="message.id" v-on:update="updateToot"></toot>
|
<toot :message="message" :key="message.id" v-on:update="updateToot"></toot>
|
||||||
</div>
|
</div>
|
||||||
|
</transition-group>
|
||||||
<div class="loading-card" v-loading="lazyLoading" :element-loading-background="backgroundColor">
|
<div class="loading-card" v-loading="lazyLoading" :element-loading-background="backgroundColor">
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
@ -95,3 +97,4 @@ export default {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
<style src="@/assets/timeline-transition.scss"></style>
|
||||||
|
|
|
@ -1,9 +1,11 @@
|
||||||
<template>
|
<template>
|
||||||
<div id="local">
|
<div id="local">
|
||||||
<div class="unread">{{ unread.length > 0 ? unread.length : '' }}</div>
|
<div class="unread">{{ unread.length > 0 ? unread.length : '' }}</div>
|
||||||
|
<transition-group name="timeline" tag="div">
|
||||||
<div class="local-timeline" v-for="message in timeline" v-bind:key="message.id">
|
<div class="local-timeline" v-for="message in timeline" v-bind:key="message.id">
|
||||||
<toot :message="message" v-on:update="updateToot"></toot>
|
<toot :message="message" v-on:update="updateToot"></toot>
|
||||||
</div>
|
</div>
|
||||||
|
</transition-group>
|
||||||
<div class="loading-card" v-loading="lazyLoading" :element-loading-background="backgroundColor">
|
<div class="loading-card" v-loading="lazyLoading" :element-loading-background="backgroundColor">
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
@ -122,3 +124,4 @@ export default {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
<style src="@/assets/timeline-transition.scss"></style>
|
||||||
|
|
|
@ -1,9 +1,11 @@
|
||||||
<template>
|
<template>
|
||||||
<div id="public">
|
<div id="public">
|
||||||
<div class="unread">{{ unread.length > 0 ? unread.length : '' }}</div>
|
<div class="unread">{{ unread.length > 0 ? unread.length : '' }}</div>
|
||||||
|
<transition-group name="timeline" tag="div">
|
||||||
<div class="public-timeline" v-for="message in timeline" v-bind:key="message.id">
|
<div class="public-timeline" v-for="message in timeline" v-bind:key="message.id">
|
||||||
<toot :message="message" v-on:update="updateToot"></toot>
|
<toot :message="message" v-on:update="updateToot"></toot>
|
||||||
</div>
|
</div>
|
||||||
|
</transition-group>
|
||||||
<div class="loading-card" v-loading="lazyLoading" :element-loading-background="backgroundColor">
|
<div class="loading-card" v-loading="lazyLoading" :element-loading-background="backgroundColor">
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
@ -122,3 +124,4 @@ export default {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
<style src="@/assets/timeline-transition.scss"></style>
|
||||||
|
|
Loading…
Reference in New Issue