diff options
| author | syuilo <syuilotan@yahoo.co.jp> | 2018-04-21 16:01:12 +0900 |
|---|---|---|
| committer | syuilo <syuilotan@yahoo.co.jp> | 2018-04-21 16:01:12 +0900 |
| commit | 4a0f9d82805fabfde6a3d350c37a5c49695b041d (patch) | |
| tree | 897023f58639e64fd37c5df8f1fb88766e6cf8bb /src/client/app/desktop | |
| parent | Darken (diff) | |
| download | misskey-4a0f9d82805fabfde6a3d350c37a5c49695b041d.tar.gz misskey-4a0f9d82805fabfde6a3d350c37a5c49695b041d.tar.bz2 misskey-4a0f9d82805fabfde6a3d350c37a5c49695b041d.zip | |
Add timeline animation
Co-Authored-By: tamaina <tamaina@hotmail.co.jp>
Diffstat (limited to 'src/client/app/desktop')
| -rw-r--r-- | src/client/app/desktop/views/components/notes.vue | 51 |
1 files changed, 31 insertions, 20 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 + + > .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 + [data-fa] + margin-right 8px > footer > * |