CSS3 transition規-范的實際使用經驗

發布時間:2017-09-09 16:00 來源:互聯網 當前欄目:網頁設計教程

   關于具體解決方法或如何規避問題的意見可以參考另一篇非常有見地的文章,“All You Need to Know About CSS Transitions”。Alex MacCaw講述的是關于實現特定的效果,而我要談的是技術背景,主要討論在使用CSS過渡的過程中所未預料到的問題。

  結構 (HTML),表現(CSS),以及行為(JavaScript)相分離并不是什么新鮮的事情,然而 CSS 能跨越這個界限并且可以在短期內得到實際的應用,這還真的是一個完全不同的討論話題。

  幾周前,我開發一個 JavaScript 模塊,在能夠使用 CSS 過渡的條件下,JavaScript 端又無法獲取到實現過渡的方式。實際遇到的問題是這兩者根本沒有辦法同步,經過多次的測試后,我只能放棄。而我的測試結果正是本文所講述的。

  首先,我們要說一下getcomputedstyle(),是一種用 JavaScript 返回瀏覽器渲染CSS的屬性值的方法。 這個方法可以查看“DOM Level 2: getComputedStyle()”和“CSS Level 2: Computed Values”。

  這對于像 font-size 這樣的屬性, 通過一個參數便可以轉換為像素值。 但對于可以縮寫的屬性值,例如 margin ,一些瀏覽器則返回為空。再就是那些同一屬性的不同屬性值,例如 font-weight 的值 bold 和700。WebKit也有一個小bug,它會從偽對象中提取出屬性值。

  這里所講述的瀏覽器之間的差異是2013年1月在使用 Firefox18(Gecko),Opera 12.12 (Presto), Internet Explorer10(Trident),Safari 瀏覽器6.0.2(WebKit),Chrome 23(WebKit) 以及 Gecko 和 WebKit的 Nightly build channels。

  事不宜遲,讓我們來一起看一下規范與實際情況的差異,為了方便,我省略了各瀏覽器的前綴。在文中我通過創建一個 CSS3 Transitions Test Suite 來發現問題。

  1、指定過渡

  CSS3 transitions 規范定義了以下四個 CSS 屬性:

  transition-property

  transition-duration

  transition-delay

  transition-timing-function

  過渡屬性

  transition-property 是用來指定當元素其中一個屬性改變時執行 transition 效果。系統默認值是 all,這意味著瀏覽器能夠以動畫形式呈現所有的可過渡屬性(transition-duration持續時間超過0s),該屬性支持單個值或以逗號隔開的多個值列表(跟其他所有transition-*屬性一樣)。

  規范規定,一個瀏覽器應該接受并保存任何它不能識別的屬性。因此,下面的例子中將會看到持續2秒的 padding 過渡:

  1

  2

  transition-property:foobar,padding;

  transition-duration:1s,2s;

  不同于規范的是,上面的情況在 WebKit 下會解析為 transition-property: all。 而 Firefox 和 Opera 會解析為 transition-property: all, padding.

  過渡持續時間

  transition-duration 屬性規定了一個過渡從初始狀態到目標狀態的持續時間。它接受以秒或毫秒的值(例如,2.3S和2300ms都是指2.3秒)。

  盡管規范明確規定了過渡值必須為正數,但 Opera 仍接受-5S的值,至少對于getComputedStyle()來說是這樣的。雖然規范中并沒有限制屬性值的大小,但 Opera 和 IE 不接受低于10ms的值。而 WebKit 在 getComputedStyle()執行中有個小bug,例如:返回值0.009999999776482582s會取代0.01s。

  • 1、
  • 2、
  • 3、
  • 4、
  • 5、
  • 6、
  • 7、
  • 8、
  • 9、
  • 10、
  • 11、
  • 12、
  • 13、
  • 14、
  • 15、
  • 16、
  • 17、
  • 18、
  • 19、
  • 20、
  • 21、
  • 22、
  • 23、
  • 24、
  • 25、
  • 1、
  • 2、
  • 3、
  • 4、
  • 5、
  • 6、
  • 7、
  • 8、
  • 9、
  • 10、
  • 11、
  • 12、
  • 13、
  • 14、
  • 15、
  • 16、
  • 17、
  • 18、
  • 19、
  • 20、
  • 21、
  • 22、
  • 23、
  • 24、
  • 25、