CSS3的transition優(yōu)化實例分析

這篇“CSS3的transition優(yōu)化實例分析”文章的知識點大部分人都不太理解，所以小編給大家總結了以下內(nèi)容，內(nèi)容詳細，步驟清晰，具有一定的借鑒價值，希望大家閱讀完這篇文章能有所收獲，下面我們一起來看看這篇“CSS3的transition優(yōu)化實例分析”文章吧。

一、菊花

現(xiàn)在web技術不斷發(fā)展，視圖與數(shù)據(jù)渲染更多由前端呈現(xiàn)，后臺更多與數(shù)據(jù)打交道。于是，我們會經(jīng)常看到這樣的交互場景。頁面加載，看到一個框框里面有個菊花在轉(zhuǎn)，然后內(nèi)容呈現(xiàn)；或者點擊個按鈕，菊花在轉(zhuǎn)，然后列表動態(tài)加載呈現(xiàn)。

是不是沒有任何問題？確實，功能上OK，有菊花，用戶也愿意等。但是，大家有沒有覺得所有交互，出現(xiàn)菊花→出現(xiàn)內(nèi)容，都是“砰砰砰”很生硬的感覺，尤其當內(nèi)容是動態(tài)，高度不確定的時候。我們使用一些比較好的手機APP(如微信)的時候一定不會有這樣的感覺，整個交互流程都是很流暢的，就像山澗的泉水，涓涓細流到山腳，而不是巨人在峽谷走路的感覺。

所以，如果菊花的呈現(xiàn)到內(nèi)容的展示能夠通過自然的動畫過渡呈現(xiàn)，勢必會增強用戶體驗。

而動態(tài)內(nèi)容呈現(xiàn)主要變化的關鍵因素就是——高度，而過渡效果最佳利器是CSS3 transition, 于是，腦中不禁疑問，是不是可以借助CSS3 transition實現(xiàn)動態(tài)內(nèi)容的高度動畫呈現(xiàn)，漸進增強用戶體驗。

其實，早在12年的時候，我就開始了這方面的嘗試，若有興趣可以查看此文：“更多|收起交互中漸進使用transition動畫”。我自己也瞅了瞅，發(fā)現(xiàn)當年的我講廢話的本領甩了現(xiàn)在的我兩條長安街。大家直接從Part5 看就好了。 其中，受限于當年略顯稚嫩的技術，里面獲得容器高度的方法，有些傻，大家就假裝沒看到。
二、CSS3 transition的難點

如果直接一行CSS代碼就可以讓動態(tài)呈現(xiàn)動畫化，那就不需要本文了，早就各個站點都是這類優(yōu)質(zhì)體驗的交互了。究其根本就是CSS3 transition的一個局限性，對"auto"*冷淡！嘛意思？

然而，當我們在一個div呈現(xiàn)動態(tài)內(nèi)容的時候，由于我們并不知道里面的內(nèi)容(都說了是動態(tài)的嘛)，所以，我們的height其實都是auto，于是，就算transition: height .35s走起，也不會有動畫效果的，我們需要的是固定值。

于是難點和關鍵點來了，如何賦予固定高度值？
三、固定高度值與transition觸發(fā)

說白了很簡單，當前高度固定值，獲得動態(tài)內(nèi)容載入后的高度固定值，再style設置，over~

代碼細節(jié)我就不講了，其實沒什么人關心的，“我需要的是代碼，代碼！”估計很多人心里是這么咆哮的。

代碼如下:

// 高度無縫動畫方法
var funTransitionHeight = function(element, time) { // time, 數(shù)值，可缺省
if (typeof window.getComputedStyle == "undefined") return;

var height = window.getComputedStyle(element).height;
element.style.height = "auto";
var targetHeight = window.getComputedStyle(element).height;
element.style.height = height;
element.offsetWidth = element.offsetWidth;
if (time) element.style.transition = "height "+ time +"ms";
element.style.height = targetHeight;
};

十行出頭點代碼。

element就是容器元素；如果transition你是寫在CSS中的，time參數(shù)可以不要，例如：

代碼如下:

element { transition: height 250ms; overflow: hidden; }</p><p>funTransitionHeight(element)

funTransitionHeight名字如果你不喜歡，可以自己改掉。IE9+有效，IE10+有動畫，IE6~IE8老樣子，所謂漸進增強。

百聞不如一見，您可以狠狠地點擊這里：不定高度動態(tài)元素height CSS3 transition過渡demo

點擊頁面上“點擊我”按鈕，里面就有有高度不固定內(nèi)容呈現(xiàn)，大伙兒就可以看到內(nèi)容呈現(xiàn)時候不是砰砰砰了，而是~

如何調(diào)用？很簡單，初始化時候funTransitionHeight()一下，賦個固定值；然后每次菊花完畢，內(nèi)容載入后在funTransitionHeight()一下，動畫就來啦。也就是說，相比你們以前的JS代碼，就多了一行funTransitionHeight(element)調(diào)用而已，是不是實用又低成本！

以上就是關于“CSS3的transition優(yōu)化實例分析”這篇文章的內(nèi)容，相信大家都有了一定的了解，希望小編分享的內(nèi)容對大家有幫助，若想了解更多相關的知識內(nèi)容，請關注億速云行業(yè)資訊頻道。