TShopping
標題:
Webkit為核心的瀏覽器的CSS樣式-----Transition
[打印本頁]
作者:
woff
時間:
2013-3-2 20:12
標題:
Webkit為核心的瀏覽器的CSS樣式-----Transition
-Webkit- Transition 在CSS3中這個屬性的作用是使得變化不那麼生硬,達到比較平和的過渡。而實際變化的屬性是需要我們自己手動去添加變化
這個屬性可以分解成多個CSS屬性:
(1) -webkit-transition-timing-function 可以定義動畫的變化時間曲線
【語法】-webkit-transition-timing-function: ease-out ,cubic-bezier(0.5,0.2,0.3,1.0);
j.jpg
(22.5 KB, 下載次數: 8)
下載附件
保存到相冊
2013-3-3 16:24 上傳
如上圖,就是一個cubic bezier曲線,cubic bezier曲線的特點是第一點始終為(0,0),最後一點始終為(1,1),而-webkit-transition-timing-function: ease-out ,cubic-bezier(0.5,0.2,0.3,1.0);這個語句裡定義的就是在控制線上的那兩點,在圖中表現為p1點和p2點。cubic-bezier(p1x ,p1y,p2x,p2y)實際上定義的是參照整個duration的百分比。
(2)-webkit-transition-property指定發生變化的屬性
【語法】:-webkit-transition-property: propertyName如果有多個屬性的話以逗號來分隔
eg: -webkit-transition-property: opacity;
P.S. 這裡需要注意的是,既然已經設定了propertyName是什麼,那麼發生變化的實際一定也要是這個屬性的才行,比
如opacity從1變成0,否則根本就沒有效果嘍,原因很明顯。
(3)-webkit-transition-duration制定發生變化的時間
【語法】:-webkit-transition-duration: time;如果有多個的話,以逗號來分隔
eg: -webkit-transition-duration: 2s;
P.S. 這裡需要說明的是,-webkit-transition-duration是同-webkit-transition-property相對應的
eg:
div{
-webkit-transition-property: -webkit-transition,opacity;
-webkit-transition-duration: 4s,2s;
}
複製代碼
當然了,如果duration只設置了一個,那麼均適用於所有的property
(4)-webkit-transition-delay 指定在變換開始之前的時間延遲
【語法】:-webkit-transition-delay:time;該方法的用法完全同-webkit-transition-duration
對於transition,我們可以綜合來寫,如下:
-webkit-transition: opacity 500ms ease-out 100ms;
參數分別為 property,duration,timing-function,delay
綜合案例:
div {
-webkit-transition-property: opacity;
-webkit-transition-duration: 2s;
}
div.fadeAway {
opacity:0;
}
<div style="width:100px;height:100px;background:blue;" > fadeAwary </div>
複製代碼
對於Transition,我們也可以在變換結束之後觸發webkitTransitionEnd事件,我們可以如此給一個元素綁定:
dom.addEventListener("webkitTransitionEnd",func);
複製代碼
歡迎光臨 TShopping (http://www.tshopping.com.tw/)
Powered by Discuz! X3.2