HTML5 bingのような素敵なコンテンツの遷移

Question

私は最近、IE9とSafari 5用のBingでプレビューされた素晴らしいエフェクトを見ました。検索ボックスでenterを押すと、検索ボックスがページの上にきれいに上がり、結果は底部から折り畳まれます。あなたはここで実際にそれを見ることができます... http://www.youtube.com/watch?v=NYuLALX6aeI#at=69

私の質問はどうですか、これはどうやってできますか？あなたが私の質問を理解できることを願っています。

Answer 1

基本的な考え方：

は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> 

デモ：彼らはすべてのCSS3アニメーションを使用している http://jsfiddle.net/AlienWebguy/hwAtU/

Answer 2

。私は非常に簡単なアニメーションの検索ボックスを手に入れました。here ChromeまたはSafariを使用してください。ちょうど何かを入力して、Enterを押してください

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：ポジショニングとアニメーションのためにJavaScriptを使用して

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

は、セマンティックコードではありません。 CSSアニメーションは、より速く、よりスムーズです。