Add nav dropdown animation

stable
Xavier Julián 2015-04-17 08:58:15 +02:00 committed by Juanfran
parent 10739b4764
commit 1b993e1b95
1 changed files with 12 additions and 3 deletions

View File

@ -86,6 +86,7 @@
position: relative; position: relative;
&:hover { &:hover {
.navbar-dropdown { .navbar-dropdown {
animation: dropdownFade .2s cubic-bezier(.09, 0, .99, .01) both;
display: block; display: block;
} }
} }
@ -114,7 +115,7 @@
} }
} }
ul { ul {
@include arrow('bottom', $blackish, $blackish, 1, 12); @include arrow('bottom', $blackish, $blackish, 1, 8);
margin: 0; margin: 0;
margin-bottom: .5rem; margin-bottom: .5rem;
padding: 0; padding: 0;
@ -145,6 +146,14 @@
// Generated with Bounce.js. Edit at http://goo.gl/yZlDYR // Generated with Bounce.js. Edit at http://goo.gl/yZlDYR
@keyframes dropdownFade { @keyframes dropdownFade {
0% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 0% {
100% { opacity: 0; transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -400, 0, 0, 1); } opacity: 0;
transform: translateY(-.25rem);
}
60% {
opacity: 1;
}
100% {
transform: translateY(0);
}
} }