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

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

成都創(chuàng)新互聯(lián)堅(jiān)持“要么做到，要么別承諾”的工作理念，服務(wù)領(lǐng)域包括：成都網(wǎng)站制作、網(wǎng)站設(shè)計(jì)、企業(yè)官網(wǎng)、英文網(wǎng)站、手機(jī)端網(wǎng)站、網(wǎng)站推廣等服務(wù)，滿(mǎn)足客戶(hù)于互聯(lián)網(wǎng)時(shí)代的扶余網(wǎng)站設(shè)計(jì)、移動(dòng)媒體設(shè)計(jì)的需求，幫助企業(yè)找到有效的互聯(lián)網(wǎng)解決方案。努力成為您成熟可靠的網(wǎng)絡(luò)建設(shè)合作伙伴！

一、菊花

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

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

所以，如果菊花的呈現(xiàn)到內(nèi)容的展示能夠通過(guò)自然的動(dòng)畫(huà)過(guò)渡呈現(xiàn)，勢(shì)必會(huì)增強(qiáng)用戶(hù)體驗(yàn)。

而動(dòng)態(tài)內(nèi)容呈現(xiàn)主要變化的關(guān)鍵因素就是——高度，而過(guò)渡效果最佳利器是CSS3 transition, 于是，腦中不禁疑問(wèn)，是不是可以借助CSS3 transition實(shí)現(xiàn)動(dòng)態(tài)內(nèi)容的高度動(dòng)畫(huà)呈現(xiàn)，漸進(jìn)增強(qiáng)用戶(hù)體驗(yàn)。

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

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

然而，當(dāng)我們?cè)谝粋€(gè)div呈現(xiàn)動(dòng)態(tài)內(nèi)容的時(shí)候，由于我們并不知道里面的內(nèi)容(都說(shuō)了是動(dòng)態(tài)的嘛)，所以，我們的height其實(shí)都是auto，于是，就算transition: height .35s走起，也不會(huì)有動(dòng)畫(huà)效果的，我們需要的是固定值。

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

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

代碼細(xì)節(jié)我就不講了，其實(shí)沒(méi)什么人關(guān)心的，“我需要的是代碼，代碼！”估計(jì)很多人心里是這么咆哮的。

代碼如下:

// 高度無(wú)縫動(dòng)畫(huà)方法
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;
};

十行出頭點(diǎn)代碼。

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

代碼如下:

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

funTransitionHeight名字如果你不喜歡，可以自己改掉。IE9+有效，IE10+有動(dòng)畫(huà)，IE6~IE8老樣子，所謂漸進(jìn)增強(qiáng)。

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

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

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

以上就是關(guān)于“CSS3的transition優(yōu)化實(shí)例分析”這篇文章的內(nèi)容，相信大家都有了一定的了解，希望小編分享的內(nèi)容對(duì)大家有幫助，若想了解更多相關(guān)的知識(shí)內(nèi)容，請(qǐng)關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。

文章標(biāo)題：CSS3的transition優(yōu)化實(shí)例分析
當(dāng)前網(wǎng)址：http://muchs.cn/article44/jpghee.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供外貿(mào)網(wǎng)站建設(shè)、小程序開(kāi)發(fā)、云服務(wù)器、自適應(yīng)網(wǎng)站、網(wǎng)站改版、靜態(tài)網(wǎng)站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶(hù)投稿、用戶(hù)轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)