動態設定 CSS3 動畫樣式

CSS3 支援了 translate 與 transform 之類的動態效果樣式,只要完成相關屬性的設定,並經由 JavaScript 動態設定,即可輕易的完成互動效果。考慮以下的範例,於其中黑色區塊按一下,此區塊會左右移動(IE瀏覽器不支援,請改用 Chrome 或是 Firfox)。

HTML5 CSS3

於畫面配置以下的內容,第二個 <div> 標籤背景設為 black 以方便測試,請特別注意其中設定了 transform 與 transition 樣式

<div style="">
        <div id="page" onclick="changeTStyle()" style="background: black;
                                color:white ;
                                width:230px;height:360px;
                                z-index: 100;
                                position: absolute;
                                padding:70px 0 0 70px;font-size:18pt;
                                -webkit-transform: translate(300px,0px);       
                                -webkit-transition: -webkit-transform 500ms">
          HTML5 CSS3
        </div>       
</div>

接下來撰寫以下的 JavaScript,其中調整 page 的 transform 樣式來達到切換的效果。

var s = true;
function changeTStyle() {
    if(s)
        document.getElementById('page').style.webkitTransform =
            'translate(0px,0px)';
    else
        document.getElementById('page').style.webkitTransform =
            'translate(300px,0px)'; 
    s = !s;
}

若是要同時支援 Firefox ,則分別設定 -moz-transform 、-moz-transition樣式即可。


沒有留言: