add transition effect to timeline

h3poteto · Apr 20, 2018 · 71580e5 · 71580e5
1 parent eccce55
commit 71580e5
Show file tree

Hide file tree

Showing 4 changed files with 27 additions and 9 deletions.
diff --git a/src/renderer/assets/timeline-transition.scss 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
@@ -1,8 +1,10 @@
 <template>
   <div id="home">
-    <div class="home-timeline" v-for="(message, index) in timeline" v-bind:key="index">
-      <toot :message="message" :key="message.id"></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"></toot>
+      </div>
+    </transition-group>
     <div class="loading-card" v-loading="lazyLoading" :element-loading-background="backgroundColor">
     </div>
   </div>
@@ -62,3 +64,4 @@ export default {
   height: 0;
 }
 </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
@@ -1,8 +1,10 @@
 <template>
   <div id="local">
-    <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>
@@ -92,3 +94,4 @@ export default {
   height: 0;
 }
 </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
@@ -1,8 +1,10 @@
 <template>
   <div id="public">
-    <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>
@@ -92,3 +94,4 @@ export default {
   height: 0;
 }
 </style>
+<style src="@/assets/timeline-transition.scss"></style>