sim1222/test1
1
0
Fork 0
Code Issues Pull Requests Projects Releases 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
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>
<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
> *