HoovesSocial/hippofish
2
0
Fork 0
Code Issues 3 Pull requests 1 Projects Releases Packages Wiki Activity Actions

✌️

Browse source
This commit is contained in:
syuilo 2018-02-23 03:33:12 +09:00
parent 64781efe52
commit 80929eb176
3 changed files with 46 additions and 23 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

12
src/web/app/animation.styl Normal file
View file

@ -0,0 +1,12 @@
.zoom-in-top-enter-active,
.zoom-in-top-leave-active {
opacity: 1;
transform: scaleY(1);
transition: transform 300ms cubic-bezier(0.23, 1, 0.32, 1), opacity 300ms cubic-bezier(0.23, 1, 0.32, 1);
transform-origin: center top;
}
.zoom-in-top-enter,
.zoom-in-top-leave-active {
opacity: 0;
transform: scaleY(0);
}

1
src/web/app/app.styl
View file

@ -1,4 +1,5 @@
@import "../style" @import "../style"
@import "../animation"
html html
&.progress &.progress

10
src/web/app/desktop/views/components/ui.header.account.vue
View file

@ -4,6 +4,7 @@
<span class="username">{{ os.i.username }}<template v-if="!isOpen">%fa:angle-down%</template><template v-if="isOpen">%fa:angle-up%</template></span> <span class="username">{{ os.i.username }}<template v-if="!isOpen">%fa:angle-down%</template><template v-if="isOpen">%fa:angle-up%</template></span>
<img class="avatar" :src="`${ os.i.avatar_url }?thumbnail&size=64`" alt="avatar"/> <img class="avatar" :src="`${ os.i.avatar_url }?thumbnail&size=64`" alt="avatar"/>
</button> </button>
<transition name="zoom-in-top">
<div class="menu" v-if="isOpen"> <div class="menu" v-if="isOpen">
<ul> <ul>
<li> <li>
@ -27,6 +28,7 @@
</li> </li>
</ul> </ul>
</div> </div>
</transition>
</div> </div>
</template> </template>
@ -209,4 +211,12 @@ export default Vue.extend({
background $theme-color background $theme-color
color $theme-color-foreground color $theme-color-foreground
&:active
background darken($theme-color, 10%)
.zoom-in-top-enter-active,
.zoom-in-top-leave-active {
transform-origin: center -16px;
}
</style> </style>