動畫效果既可以用 JS 來控制,也可以用 CSS3 來實現,至於選什麼,你要根據如下幾個方面來考慮。
1,效能和相容性:效能來講,CSS3 的效能要比 JS 做動畫要好一些。CSS3 是瀏覽器來解析渲染,透過 GPU 運算。而 JS 是透過不斷 DOM 操作,改變其 style 屬性實現,因此效率就差一點。但你也不能完全用 CSS3,因為 CSS3 的相容性有問題,對於低版本瀏覽器實現不太好,可能會出現意外情況。
2,動畫效果的實現和控制能力:CSS3 可以實現大部分的動畫,但是也有一些互動性更強的或者更為精細的或者需要你精準控制的動畫,CSS3 難以實現。JS 當然就控制的比較精確,怎麼搞都可以。
3,開發成本:CSS3 就是那幾個屬性,組合一下就 OK,開發成本低比較簡單。JS 可能需要各種動畫演算法函式,如果沒有現成的,自己開發可能成本略高。=======綜上所述,最好的方案是把 CSS3 和 JS 配合起來用。比如用 JS 來進行條件的判斷,然後掛上一些特殊的類。而這些類裡面就是 CSS3 動畫的定義,掛上類就可以在這個結構上面搞出動畫。那麼既實現了 JS 的精準控制,又使用了 CSS3 的高效能和簡單快速開發。同時對不支援瀏覽器做判斷和降級。回到答主的問題,佈局和樣式、字型等一切與樣式有關的,全部用 CSS 來定義。JS 只負責處理互動和功能。至於動畫,你就按照上面我說的來判斷把。簡單的直接 :hover 等搞定了,複雜的上 JS。
動畫效果既可以用 JS 來控制,也可以用 CSS3 來實現,至於選什麼,你要根據如下幾個方面來考慮。
1,效能和相容性:效能來講,CSS3 的效能要比 JS 做動畫要好一些。CSS3 是瀏覽器來解析渲染,透過 GPU 運算。而 JS 是透過不斷 DOM 操作,改變其 style 屬性實現,因此效率就差一點。但你也不能完全用 CSS3,因為 CSS3 的相容性有問題,對於低版本瀏覽器實現不太好,可能會出現意外情況。
2,動畫效果的實現和控制能力:CSS3 可以實現大部分的動畫,但是也有一些互動性更強的或者更為精細的或者需要你精準控制的動畫,CSS3 難以實現。JS 當然就控制的比較精確,怎麼搞都可以。
3,開發成本:CSS3 就是那幾個屬性,組合一下就 OK,開發成本低比較簡單。JS 可能需要各種動畫演算法函式,如果沒有現成的,自己開發可能成本略高。=======綜上所述,最好的方案是把 CSS3 和 JS 配合起來用。比如用 JS 來進行條件的判斷,然後掛上一些特殊的類。而這些類裡面就是 CSS3 動畫的定義,掛上類就可以在這個結構上面搞出動畫。那麼既實現了 JS 的精準控制,又使用了 CSS3 的高效能和簡單快速開發。同時對不支援瀏覽器做判斷和降級。回到答主的問題,佈局和樣式、字型等一切與樣式有關的,全部用 CSS 來定義。JS 只負責處理互動和功能。至於動畫,你就按照上面我說的來判斷把。簡單的直接 :hover 等搞定了,複雜的上 JS。