natty
/
calckey
1
0
Fork 0
Code Issues 1 Pull Requests Packages Projects Releases Wiki Activity

Add timeline animation 

Co-Authored-By: tamaina <tamaina@hotmail.co.jp>
This commit is contained in:
syuilo 2018-04-21 16:01:12 +09:00
parent 797b5d2311
commit 4a0f9d8280
2 changed files with 65 additions and 43 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

51
src/client/app/desktop/views/components/notes.vue
View File

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

57
src/client/app/mobile/views/components/notes.vue
View File

@ -2,13 +2,15 @@
<div class="mk-notes"> <div class="mk-notes">
<slot name="head"></slot> <slot name="head"></slot>
<slot></slot> <slot></slot>
<template v-for="(note, i) in _notes"> <transition-group name="mk-notes" class="transition">
<mk-note :note="note" :key="note.id" @update:note="onNoteUpdated(i, $event)"/> <template v-for="(note, i) in _notes">
<p class="date" v-if="i != notes.length - 1 && note._date != _notes[i + 1]._date"> <mk-note :note="note" :key="note.id" @update:note="onNoteUpdated(i, $event)"/>
<span>%fa:angle-up%{{ note._datetext }}</span> <p class="date" :key="note.id + '_date'" v-if="i != notes.length - 1 && note._date != _notes[i + 1]._date">
<span>%fa:angle-down%{{ _notes[i + 1]._datetext }}</span> <span>%fa:angle-up%{{ note._datetext }}</span>
</p> <span>%fa:angle-down%{{ _notes[i + 1]._datetext }}</span>
</template> </p>
</template>
</transition-group>
<footer> <footer>
<slot name="tail"></slot> <slot name="tail"></slot>
</footer> </footer>
@ -52,6 +54,31 @@ export default Vue.extend({
border-radius 8px border-radius 8px
box-shadow 0 0 0 1px rgba(0, 0, 0, 0.2) 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 > .init
padding 64px 0 padding 64px 0
text-align center text-align center
@ -73,22 +100,6 @@ export default Vue.extend({
font-size 3em font-size 3em
color #ccc 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 > footer
text-align center text-align center
border-top solid 1px #eaeaea border-top solid 1px #eaeaea