Add timeline animation
Co-Authored-By: tamaina <tamaina@hotmail.co.jp>
This commit is contained in:
syuilo
parent
797b5d2311
commit
4a0f9d8280
2 changed files with 65 additions and 43 deletions
|
|
@ -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
|
||||||
> *
|
> *
|
||||||
|
|
|
||||||
|
|
@ -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
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue