javascript - Transições de conteúdo elegantes como no HTML5 bing

Recentemente vi um efeito interessante a ser mostrado no Bing para o IE9 e também para o Safari 5. Quando se pressiona Enter na caixa de pesquisa, a caixa de pesquisa move-se suavemente para o topo da página e os resultados aparecem a desdobrar-se a partir do fundo. Pode vê-lo em ação aqui... http://www.youtube.com/watch?v=NYuLALX6aeI#at=69

A minha pergunta é, como é que isto é feito e como é que eu posso fazer isto? Espero que consiga entender a minha pergunta.

Resposta #1

Ideia básica:

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>

Demonstração: http://jsfiddle.net/AlienWebguy/hwAtU/

Resposta #2

Eles estão todos a usar animação CSS3. Mexi num campo de pesquisa muito simples com animação aqui. Por favor, use o Chrome ou o Safari. Apenas digite algo e pressione 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 :

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

Usar Javascript para posicionamento e animação não é um código semântico. As animações em CSS são muito mais rápidas e suaves.