Add animation
This commit is contained in:
parent
1c84c0828e
commit
2824d8a5b6
1 changed files with 70 additions and 59 deletions
|
@ -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
|
||||
|
|
Loading…
Reference in a new issue