From a63cfd623c0de7d99c5fc17312671e5f2583bcb5 Mon Sep 17 00:00:00 2001
From: nasum <masaya.nasu@crowdworks.co.jp>
Date: Fri, 20 Apr 2018 17:30:04 +0900
Subject: [PATCH] add transition effect to timeline

---
 src/renderer/assets/timeline-transition.scss             | 9 +++++++++
 src/renderer/components/TimelineSpace/Contents/Home.vue  | 9 ++++++---
 src/renderer/components/TimelineSpace/Contents/Local.vue | 9 ++++++---
 .../components/TimelineSpace/Contents/Public.vue         | 9 ++++++---
 4 files changed, 27 insertions(+), 9 deletions(-)
 create mode 100644 src/renderer/assets/timeline-transition.scss

diff --git a/src/renderer/assets/timeline-transition.scss b/src/renderer/assets/timeline-transition.scss
new file mode 100644
index 00000000..7561966a
--- /dev/null
+++ b/src/renderer/assets/timeline-transition.scss
@@ -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;
+}
diff --git a/src/renderer/components/TimelineSpace/Contents/Home.vue b/src/renderer/components/TimelineSpace/Contents/Home.vue
index 2cb2316a..81698b5a 100644
--- a/src/renderer/components/TimelineSpace/Contents/Home.vue
+++ b/src/renderer/components/TimelineSpace/Contents/Home.vue
@@ -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>
diff --git a/src/renderer/components/TimelineSpace/Contents/Local.vue b/src/renderer/components/TimelineSpace/Contents/Local.vue
index 5166074b..055e030d 100644
--- a/src/renderer/components/TimelineSpace/Contents/Local.vue
+++ b/src/renderer/components/TimelineSpace/Contents/Local.vue
@@ -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>
diff --git a/src/renderer/components/TimelineSpace/Contents/Public.vue b/src/renderer/components/TimelineSpace/Contents/Public.vue
index 59e63f68..ec395194 100644
--- a/src/renderer/components/TimelineSpace/Contents/Public.vue
+++ b/src/renderer/components/TimelineSpace/Contents/Public.vue
@@ -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>