在瀏覽器中創建類似移動應用程序的動畫

Question

這可能是一個愚蠢的問題，但是有沒有辦法在瀏覽器中創建像移動應用程序這樣的動畫。 參考鏈接：http://www.google.com/design/spec/animation/meaningful-transitions.html#meaningful-transitions-meaningful-transitions-examples

這將是很好，如果可以建立這樣的東西。我知道一些javascript/jQuery，但這似乎是我的知識。

的任何技術細節會有所幫助

Answer 1

您可以嘗試使用famo.us：http://famo.us/

這是一個新的框架，所以有一些問題，但它有潛力。它依賴於矩陣變換，可以做非常了不起的事情，如這樣的：http://www.youtube.com/watch?v=6jg-PlisAFc

您可以檢查出更多的演示在這裏：http://famo.us/demos/

而且這裏有一個DNA螺旋例如：http://www.youtube.com/watch?v=JbIL3asjZBs

希望這有助於。

Answer 2

這裏有一個小例子，你可以用一些jQuery來觸發帶有類更改和CSS3轉換的動畫來處理動畫。

它需要進行一些調整和自定義來達到鏈接動畫的質量，但它表明CSS3/jQuery動畫可以非常流暢。

DEMO

HTML：

<header></header> 
<section> 
    <article> 
     <div class="wrap"> 
      <img src="" alt="" /> 
      <p>some text</p> 
     </div> 
    </article> 
    <article> 
     <div class="wrap"> 
      <img src="" alt="" /> 
      <p>some text</p> 
     </div> 
    </article> 
    .... 
</section> 

CSS：

body,html{margin:0;} 
header{ 
    height:100px; 
    background:#000; 
} 
article{ 
    float:left; 
    width:50%; 
    padding-bottom:16%; 
    position:relative; 
    color:#fff; 
} 
article .wrap{ 
    position:absolute; 
    width:100%; 
    height:100%; 
    overflow:hidden; 
    z-index:1; 
    background-color: rgba(0, 0, 0, 0.9); 

    -webkit-transition: width 0.2s ease-out, height 0.2s ease-out, 1s z-index 0s; 
    transition: width 0.2s ease-out, height 0.2s ease-out, 1s z-index 0s; 
} 
article .wrap img{ 
    display:block; 
    width:100%; 
    height:auto; 
} 
footer{ 
    height:50px; 
    width:100%; 
    position:fixed; 
    bottom:0; 
    left:0; 
    background:#000; 
} 
article:nth-child(odd) .wrap.show{ 
    width:200%; 
    height: 100vh; 
    z-index:2; 
    -webkit-transition: width 0.2s ease-out, height 0.6s ease-out; 
    transition: width 0.2s ease-out, height 0.6s ease-out; 
} 

的jQuery：

$('.wrap').click(function(){ 
    $('.wrap').not(this).removeClass('show'); 
    $(this).toggleClass('show'); 
});