m/blog
1
0
Fork 0
mirror of https://github.com/kremalicious/blog.git synced 2025-02-03 23:57:46 +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 permalink: /:title
relative_permalinks: true
paginate: 15 paginate: 15
paginate_path: "/page/:num" paginate_path: "/page/:num"
category_dir: "/" category_dir: "/"

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

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

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

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

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

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