diff --git a/src/web/app/animation.styl b/src/web/app/animation.styl new file mode 100644 index 000000000..8f121b313 --- /dev/null +++ b/src/web/app/animation.styl @@ -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); +} diff --git a/src/web/app/app.styl b/src/web/app/app.styl index 22043b883..c441a445f 100644 --- a/src/web/app/app.styl +++ b/src/web/app/app.styl @@ -1,4 +1,5 @@ @import "../style" +@import "../animation" html &.progress diff --git a/src/web/app/desktop/views/components/ui.header.account.vue b/src/web/app/desktop/views/components/ui.header.account.vue index af58e81a0..b55333ecc 100644 --- a/src/web/app/desktop/views/components/ui.header.account.vue +++ b/src/web/app/desktop/views/components/ui.header.account.vue @@ -4,29 +4,31 @@ {{ os.i.username }} avatar - + + + @@ -209,4 +211,12 @@ export default Vue.extend({ background $theme-color color $theme-color-foreground + &:active + background darken($theme-color, 10%) + +.zoom-in-top-enter-active, +.zoom-in-top-leave-active { + transform-origin: center -16px; +} +