在CSS3中滑動動畫

我目前正在研究用HTML 5，CSS3和jQuery編寫的移動應用程序框架。對於「屏幕」的標記，我有以下佈局：在CSS3中滑動動畫

<div class="page" id="home"> 
    <!-- some content is here... --> 
</div> 
<div class="page" id="lists"> 
    <!-- some more content is here... --> 
</div>

我目前使用jQuery來檢測頁面上的第一div元素，並將它class屬性爲current。然後，我有以下CSS聲明裏面隱藏以外的任何其他page.current：

div.page { 
    display: none; 
} 
    div.page.current { 
     display: block; 
    }

只要瀏覽器檢測到哈希改變事件（window.onhashchange），我運行下面的jQuery：

if(window.location.hash) 
{ 
    var the_hash = window.location.hash.substring(1); 
    if($('#' + the_hash).length > 0) 
    { 
     $('.current').removeClass('current'); 
     $('#' + the_hash).addClass('current'); 
    } 
} 
else 
{ 
    $('div').eq(0).addClass('current'); 
}

其中的偉大工程顯示哪個錨點被點擊。不過，我現在想創建一個CSS轉換（像幻燈片轉換那樣簡單）。我知道我可以使用jQuery和animate()來實現這一點，但我更願意完全使用CSS3動畫（類似於轉換變換），因爲iOS爲這些動畫提供硬件加速。

任何人都可以點我正確的方向，用這個標記我可以添加一個動畫，從右到左擦除當前div，同時顯示新的？

來源

2011-08-21 BenM

最簡單的方法可能是另一個類添加到每個屏幕外頁面，如.left和.right，用來定位頁面就在屏幕的一側，也許使用使用left: CSS屬性。

要將頁面拖到屏幕上，您將刪除.left類並將其更改爲.current。

以設置過渡動畫，你需要在.page類像一個CSS規則：

-webkit-transition: left 1s linear;

來源

2011-08-21 21:25:52 tjvr

在CSS3中滑動動畫

回答

相關問題