HTML5 bing gibi temiz içerik geçişleri

Question

Son zamanlarda, IE için IE9'da ve ayrıca Safari 5 için önizleme yapıldığında güzel bir efekt gördüm. Arama kutusuna enter tuşuna bastığınızda, arama kutusu sayfanın üst kısmına doğru güzel bir şekilde hareket eder ve Sonuçlar alttan katlanır. Burada görebiliyorsunuz ... http://www.youtube.com/watch?v=NYuLALX6aeI#at=69

Sorum şu: Bu nasıl yapılır ve bunu nasıl yapabilirim? Umarım sorumu anlayabilirsiniz.

Answer 1

Temel fikir:

JQuery:

$('#go').click(function() { 
    $('#form').animate({ 
     'height': '80px', 
     'text-indent': '50px', 
     'padding-top':'20px' 
    }, { 
     queue: false, 
     duration: 1500, 
     complete:function(){ 
      $('html,body').css('overflow-y','visible'); 
     } 
    }); 
    $('#results').show({ 
     type: 'slide', 
     direction: 'up' 
    }, { 
     queue: false, 
     duration: 1500 
    }); 
}); 

CSS:

#form { 
    background-color:blue; 
    text-indent:300px; 
    width:100%; 
    height:100%; 
    padding-top:200px; 
} 

#results { 
    background-color:yellow; 
    display:none; 
    height:700px; 
} 
body, html { 
    width:100%; 
    height:100%; 
    overflow:hidden; 
} 

HTML:

<div id="form"> 
    <input type="text" /> 
    <input type="button" id="go" value="go" /> 
</div> 
<div id="results">Search results</div> 

Demo: Hepsi CSS3 animasyon kullanan http://jsfiddle.net/AlienWebguy/hwAtU/

Answer 2

. Animasyon here ile çok basit bir arama kutusu açıldım Lütfen Chrome veya Safari'yi kullanın. Sadece bir şey yazın ve enter tuşuna basın.

CSS

body{text-align:center; padding: 200px 0;-webkit-transition: all 0.4s linear;} 
#search{-webkit-transition: all 0.2s linear;} 
#search:focus{-webkit-transform:scale(1.4);} 

HTML

<input type="search" placeholder="Search..." id="search"/> 

JS: konumlandırma ve animasyon için Javascript Kullanma

document.getElementById('search').addEventListener('keydown', function(e){ 
    if(e.keyCode == 13){document.body.style.padding = "40px";} 
}, false); 

anlamsal kodu değil. CSS animasyonu çok daha hızlı ve pürüzsüz.