Hopiu/vue-material
1
0
Fork 0
mirror of https://github.com/Hopiu/vue-material.git synced 2026-04-22 15:44:49 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Improve transition on bottom bar

Browse source
This commit is contained in:
Marcos Moura 2016-07-14 14:48:45 -03:00
parent f11aae35c5
commit 7b4eeff530
2 changed files with 10 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

11
src/components/mdBottomBar/mdBottomBar.scss
View file

@ -18,6 +18,7 @@
flex-flow: column nowrap;
align-items: center;
justify-content: space-between;
flex: 1;
position: relative;
border: none;
background: transparent;
@ -41,6 +42,7 @@
.md-bottom-bar.md-shift & {
min-width: 56px;
max-width: 96px;
position: static;
.md-icon {
@ -49,23 +51,28 @@
.md-text {
opacity: 0;
transform: scale(1) translate3d(0, 6px, 0);
transform: scale(1) translate3d(0, 10px, 0);
}
&.md-active {
min-width: 96px;
max-width: 168px;
.md-icon,
.md-text {
opacity: 1;
}
.md-text {
transform: scale(1) translate3d(0, 6px, 0);
}
}
}
.md-text {
color: #757575;
transform: scale(.8571) translateY(2px);
transition: all $swift-ease-out-duration $swift-ease-out-timing-function,
transition: $swift-ease-out,
opacity $swift-linear-duration $swift-linear-timing-function;
}

2
src/docs.vue
View file

@ -36,7 +36,7 @@
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div style="width: 360px; height: 480px;" v-md-theme>
<div style="width: 720px; max-width: 100%; height: 480px;" v-md-theme>
<md-bottom-bar md-shift>
<md-bottom-bar-item md-icon="ondemand_video">Movies</md-bottom-bar-item>
<md-bottom-bar-item md-icon="music_note">Music</md-bottom-bar-item>