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: [PATCH] Add timeline animation
Co-Authored-By: tamaina <tamaina@hotmail.co.jp>
---
.../app/desktop/views/components/notes.vue | 51 ++++++++++-------
.../app/mobile/views/components/notes.vue | 57 +++++++++++--------
2 files changed, 65 insertions(+), 43 deletions(-)
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
- [data-fa]
- margin-right 8px
+ > .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
> footer
> *
diff --git a/src/client/app/mobile/views/components/notes.vue b/src/client/app/mobile/views/components/notes.vue
index 573026d53e..999ab566ac 100644
--- a/src/client/app/mobile/views/components/notes.vue
+++ b/src/client/app/mobile/views/components/notes.vue
@@ -2,13 +2,15 @@
<div class="mk-notes">
<slot name="head"></slot>
<slot></slot>
- <template v-for="(note, i) in _notes">
- <mk-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">
+ <mk-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="tail"></slot>
</footer>
@@ -52,6 +54,31 @@ export default Vue.extend({
border-radius 8px
box-shadow 0 0 0 1px rgba(0, 0, 0, 0.2)
+ .transition
+ .mk-notes-enter
+ .mk-notes-leave-to
+ opacity 0
+ transform translateY(-30px)
+
+ > *
+ transition transform .3s ease, opacity .3s ease
+
+ > .date
+ display block
+ margin 0
+ line-height 32px
+ text-align center
+ font-size 0.9em
+ color #aaa
+ background #fdfdfd
+ border-bottom solid 1px #eaeaea
+
+ span
+ margin 0 16px
+
+ [data-fa]
+ margin-right 8px
+
> .init
padding 64px 0
text-align center
@@ -73,22 +100,6 @@ export default Vue.extend({
font-size 3em
color #ccc
- > .date
- display block
- margin 0
- line-height 32px
- text-align center
- font-size 0.9em
- color #aaa
- background #fdfdfd
- border-bottom solid 1px #eaeaea
-
- span
- margin 0 16px
-
- [data-fa]
- margin-right 8px
-
> footer
text-align center
border-top solid 1px #eaeaea