|
|
 |
|
|
| |
| |
|
| |
儘管人們期望在屏幕上有些改變，但是 CSS 和 HTML 對頁面中的交互能做的實在太少了 |
|
|
儘管人們期望在屏幕上有些改變，但是 CSS 和 HTML 對頁面中的交互能做的實在太少了，而那些還需要用代碼來實現。
比如一個鏈接要麼是這個顏色，要麼是那個顏色；一個文本區域要麼這麼大，要麼那麼大；一張圖片要麼是透明的要麼是不透明的；它們是從一個狀態直接變到另一個狀態——中間並沒有過渡。
這導致大部分網頁有些生硬，因為元素只會很死板的切換或改變。
是的，你可以使用 DHTML、jQuery 或者自己編寫 JS 來實現過度，但是這需要更多的代碼來實現本應該非常簡單的功能。
我們需要的是快速而簡單的方法來給頁面添加簡單的變換(transition)效果。在本文中，你會發現很有用的關於 CSS 變換(transition)以及如何使用它們的信息。
幾個月之前，我就建議設計師應該開始使用新的 CSS 3 技術來實現一些它們渴求已久的基本的功能了——唯一的問題就是，這些技術沒有一個能在 IE 中可用，包括 IE8 。
一些讀者認為的那些技術將會有 75% 的用戶看不到的觀點是不靠譜的。
對那些讀者我想說，“坐穩了”，因為我將要向你介紹另一個新的 CSS 屬性，它允許你通過簡單的幾行代碼來為任意元素添加很酷的變換效果。
CSS 變換剛剛在 CSS 3 中被引入，但是已經被添加為 webkit 的擴展了。也就是說，現在它們只能用於基於 webkit 內核的瀏覽器，包括 Apple Safari 和 Google Chrome。不過從 Opera 10.5 pre-Alpha 版本來看，Opera 將在下一個 10.5 中支持 CSS 3 變換。所以要看到本文中提到的實際效果，強烈建議你使用 Chrome 或者 Safari 4 來查看本文。
CSS 變換從哪裡來？
變換曾經只是 Webkit 的一部分，而且是 Safari UI 能做而其它瀏覽器不能實現的一些很酷的東東的基礎。
但是 W3C CSS 工作組曾經拒絕將變換添加到它的官方特性裡面，一些成員堅持認為變換並非 CSS 屬性而通過腳本來處理會更好。 (內牛滿面啊，我前一段也有類似的觀點，也和高溫討論過，我認為 CSS 動畫超出了表現的範圍，交互的東西應該有腳本來實現，不過後來在鬼哥的點撥下，才開始有了新的認識——神飛)
但是很多設計師和開發人員，包括我自己，堅持認為這確實是樣式——只是動態樣式，而不是我們日常使用的傳統的靜態樣式。
幸運的是，關於動態樣式的爭論已經成為過去。去年三月份，來自 Apple 和 Mozilla 的代表們開始將CSS變換模塊添加到 CSS 3 特性裡面，非常接近 Apple 已經添加到 webkit 中的表現。
關於設計增強的一個簡要介紹
在我們繼續之前，讓我強調一點：永遠不要讓網站的功能依賴樣式，如果該樣式不是瀏覽器通用的話(也就是說，所有的常用瀏覽器都支持)。
對錯過的同學再一次強調：永遠不要讓網站的功能依賴樣式，如果該樣式不是瀏覽器通用的話。
這也就是說，你可以使用樣式，比如變換，作為設計增強以提高用戶體驗——在不犧牲看不到它們的用戶的可用性的前提下。如果你不用 CSS 變換照樣能用而且用戶依然能夠完成他們的任務，就沒問題，你就可以使用 CSS 變換。
|
|
|
|
|
| |
|
|
|
|
|
|
|
