heartles/egirlskey
1
0
Fork 0
Code Issues 1 Pull requests Projects Releases Packages Wiki Activity

Add timeline animation

Browse source 
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

13
src/client/app/desktop/views/components/notes.vue
View file

@ -1,12 +1,14 @@
<template> <template>
<div class="mk-notes"> <div class="mk-notes">
<transition-group name="mk-notes" class="transition">
<template v-for="(note, i) in _notes"> <template v-for="(note, i) in _notes">
<x-note :note="note" :key="note.id" @update:note="onNoteUpdated(i, $event)"/> <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"> <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-up%{{ note._datetext }}</span>
<span>%fa:angle-down%{{ _notes[i + 1]._datetext }}</span> <span>%fa:angle-down%{{ _notes[i + 1]._datetext }}</span>
</p> </p>
</template> </template>
</transition-group>
<footer> <footer>
<slot name="footer"></slot> <slot name="footer"></slot>
</footer> </footer>
@ -51,6 +53,15 @@ export default Vue.extend({
<style lang="stylus" scoped> <style lang="stylus" scoped>
root(isDark) root(isDark)
.transition
.mk-notes-enter
.mk-notes-leave-to
opacity 0
transform translateY(-30px)
> *
transition transform .3s ease, opacity .3s ease
> .date > .date
display block display block
margin 0 margin 0

45
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>
<transition-group name="mk-notes" class="transition">
<template v-for="(note, i) in _notes"> <template v-for="(note, i) in _notes">
<mk-note :note="note" :key="note.id" @update:note="onNoteUpdated(i, $event)"/> <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"> <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-up%{{ note._datetext }}</span>
<span>%fa:angle-down%{{ _notes[i + 1]._datetext }}</span> <span>%fa:angle-down%{{ _notes[i + 1]._datetext }}</span>
</p> </p>
</template> </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