m/blog
1
0
Fork 0
mirror of https://github.com/kremalicious/blog.git synced 2025-02-03 15:47:37 +01:00
Code

improve search field animation

Browse Source
This commit is contained in:
Matthias Kretschmann 2014-08-10 00:26:08 +02:00
parent b190438a14
commit cc1953df54
4 changed files with 8 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
_config.yml
View File

@ -21,7 +21,6 @@ email: m@kretschmann.io
# --------------------
permalink: /:title
relative_permalinks: true
paginate: 15
paginate_path: "/page/:num"
category_dir: "/"

6
_src/assets/js/app.js
View File

@ -35,7 +35,7 @@ var siteNavigation = {
});
// show search
$searcharea.removeClass('ready bounceOutUp').addClass('ready bounceInDown');
$searcharea.removeClass('ready bounceOutUp').addClass('ready slideDown');
$searchfield.focus();
if ( $searchfield.val().length ) {
$searchpop.removeClass('hide');
@ -48,7 +48,7 @@ var siteNavigation = {
// bind the hide controls
$(document).bind('click.hidethepop', function() {
$searcharea.removeClass('bounceInDown');
$searcharea.removeClass('slideDown');
$searchpop.addClass('hide');
// unbind the hide controls
@ -78,7 +78,7 @@ var siteNavigation = {
e.preventDefault();
// hide search area
$searcharea.removeClass('bounceInDown').addClass('bounceOutUp');
$searcharea.removeClass('slideDown').addClass('bounceOutUp');
$searchpop.addClass('hide');
// empty search field

15
_src/assets/styl/animations.styl
View File

@ -51,7 +51,7 @@ gpuacceleration()
////////////////////////////////////
// Down
@keyframes bounceInDown
@keyframes slideDown
0%, 60%, 75%, 90%, 100%
// http://cubic-bezier.com/#.06,.85,.54,1.39
transition-timing-function: cubic-bezier(.06,.85,.54,1)
@ -59,20 +59,11 @@ gpuacceleration()
0%
transform: translate3d(0, -100px, 0)
60%
transform: translate3d(0, 20px, 0)
75%
transform: translate3d(0, -10px, 0)
90%
transform: translate3d(0, 5px, 0)
100%
transform: none
.bounceInDown
animation: bounceInDown .4s both
.slideDown
animation: slideDown .25s both
// Up
@keyframes bounceOutUp

3
_src/assets/styl/buttons.styl
View File

@ -160,8 +160,9 @@ button
@extend .textcenter
width: 16px
height: 16px
line-height: 1
line-height: 12px
font-size: $font-size-small
padding: 0
border-radius: 16px
display: block
background: $brand-grey-light