From 4a0f9d82805fabfde6a3d350c37a5c49695b041d Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Sat, 21 Apr 2018 16:01:12 +0900
Subject: Add timeline animation

Co-Authored-By: tamaina <tamaina@hotmail.co.jp>
---
 src/client/app/desktop/views/components/notes.vue | 51 ++++++++++++++---------
 1 file changed, 31 insertions(+), 20 deletions(-)

(limited to 'src/client/app/desktop')

diff --git a/src/client/app/desktop/views/components/notes.vue b/src/client/app/desktop/views/components/notes.vue
index 14834f0962..1a33a4240b 100644
--- a/src/client/app/desktop/views/components/notes.vue
+++ b/src/client/app/desktop/views/components/notes.vue
@@ -1,12 +1,14 @@
 <template>
 <div class="mk-notes">
-	<template v-for="(note, i) in _notes">
-		<x-note :note="note" :key="note.id" @update:note="onNoteUpdated(i, $event)"/>
-		<p class="date" v-if="i != notes.length - 1 && note._date != _notes[i + 1]._date">
-			<span>%fa:angle-up%{{ note._datetext }}</span>
-			<span>%fa:angle-down%{{ _notes[i + 1]._datetext }}</span>
-		</p>
-	</template>
+	<transition-group name="mk-notes" class="transition">
+		<template v-for="(note, i) in _notes">
+			<x-note :note="note" :key="note.id" @update:note="onNoteUpdated(i, $event)"/>
+			<p class="date" :key="note.id + '_date'" v-if="i != notes.length - 1 && note._date != _notes[i + 1]._date">
+				<span>%fa:angle-up%{{ note._datetext }}</span>
+				<span>%fa:angle-down%{{ _notes[i + 1]._datetext }}</span>
+			</p>
+		</template>
+	</transition-group>
 	<footer>
 		<slot name="footer"></slot>
 	</footer>
@@ -51,21 +53,30 @@ export default Vue.extend({
 
 <style lang="stylus" scoped>
 root(isDark)
-	> .date
-		display block
-		margin 0
-		line-height 32px
-		font-size 14px
-		text-align center
-		color isDark ? #666b79 : #aaa
-		background isDark ? #242731 : #fdfdfd
-		border-bottom solid 1px isDark ? #1c2023 : #eaeaea
+	.transition
+		.mk-notes-enter
+		.mk-notes-leave-to
+			opacity 0
+			transform translateY(-30px)
 
-		span
-			margin 0 16px
+		> *
+			transition transform .3s ease, opacity .3s ease
+
+		> .date
+			display block
+			margin 0
+			line-height 32px
+			font-size 14px
+			text-align center
+			color isDark ? #666b79 : #aaa
+			background isDark ? #242731 : #fdfdfd
+			border-bottom solid 1px isDark ? #1c2023 : #eaeaea
+
+			span
+				margin 0 16px
 
-		[data-fa]
-			margin-right 8px
+			[data-fa]
+				margin-right 8px
 
 	> footer
 		> *
-- 
cgit v1.3.1-freya