mirror/hotomoe
1
0
Fork 0
mirror of https://github.com/hotomoe/hotomoe synced 2024-11-29 23:38:13 +09:00
Code

Add animation

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
src/client/app/common/views/components/welcome-timeline.vue
View File

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