Add animation

This commit is contained in:
syuilo 2018-09-08 04:54:11 +09:00
parent 1c84c0828e
commit 2824d8a5b6
No known key found for this signature in database
GPG Key ID: BDC4C49D06AB9D69
1 changed files with 70 additions and 59 deletions

View File

@ -1,6 +1,7 @@
<template>
<div class="mk-welcome-timeline">
<div v-for="note in notes">
<transition-group name="ldzpakcixzickvggyixyrhqwjaefknon" tag="div">
<div v-for="note in notes" :key="note.id">
<mk-avatar class="avatar" :user="note.user" target="_blank"/>
<div class="body">
<header>
@ -17,6 +18,7 @@
</div>
</div>
</div>
</transition-group>
</div>
</template>
@ -83,9 +85,18 @@ export default Vue.extend({
</script>
<style lang="stylus" scoped>
.ldzpakcixzickvggyixyrhqwjaefknon-enter
.ldzpakcixzickvggyixyrhqwjaefknon-leave-to
opacity 0
transform translateY(-30px)
root(isDark)
background isDark ? #282C37 : #fff
> div
> *
transition transform .3s ease, opacity .3s ease
> div
padding 16px
overflow-wrap break-word