Mastodon
/
Whalebird-desktop-client-mac-linux-windows
mirror of https://github.com/h3poteto/whalebird-desktop
1
0
Fork 0
Code Issues Releases Wiki Activity

add transition effect to timeline

This commit is contained in:
nasum 2018-04-20 17:30:04 +09:00
parent 35b2f1ea52
commit a63cfd623c
4 changed files with 27 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
src/renderer/assets/timeline-transition.scss Normal file
View File

@ -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;
}

9
src/renderer/components/TimelineSpace/Contents/Home.vue
View File

@ -1,9 +1,11 @@
<template>
<div id="home">
<div class="unread">{{ unread.length > 0 ? unread.length : '' }}</div>
<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>
</div>
<transition-group name="timeline" tag="div">
<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>
</div>
</transition-group>
<div class="loading-card" v-loading="lazyLoading" :element-loading-background="backgroundColor">
</div>
</div>
@ -95,3 +97,4 @@ export default {
}
}
</style>
<style src="@/assets/timeline-transition.scss"></style>

9
src/renderer/components/TimelineSpace/Contents/Local.vue
View File

@ -1,9 +1,11 @@
<template>
<div id="local">
<div class="unread">{{ unread.length > 0 ? unread.length : '' }}</div>
<div class="local-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="local-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>
@ -122,3 +124,4 @@ export default {
}
}
</style>
<style src="@/assets/timeline-transition.scss"></style>

9
src/renderer/components/TimelineSpace/Contents/Public.vue
View File

@ -1,9 +1,11 @@
<template>
<div id="public">
<div class="unread">{{ unread.length > 0 ? unread.length : '' }}</div>
<div class="public-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="public-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>
@ -122,3 +124,4 @@ export default {
}
}
</style>
<style src="@/assets/timeline-transition.scss"></style>