淺析與CSS3的loading動(dòng)畫加載相關(guān)的transition優(yōu)化

一、菊花
現(xiàn)在web技術(shù)不斷發(fā)展,視圖與數(shù)據(jù)渲染更多由前端呈現(xiàn),后臺(tái)更多與數(shù)據(jù)打交道。于是,我們會(huì)經(jīng)??吹竭@樣的交互場景。頁面加載,看到一個(gè)框框里面有個(gè)菊花在轉(zhuǎn),然后內(nèi)容呈現(xiàn);或者點(diǎn)擊個(gè)按鈕,菊花在轉(zhuǎn),然后列表動(dòng)態(tài)加載呈現(xiàn)。例如:
是不是沒有任何問題?確實(shí),功能上OK,有菊花,用戶也愿意等。但是,大家有沒有覺得所有交互,出現(xiàn)菊花→出現(xiàn)內(nèi)容,都是“砰砰砰”很生硬的感覺,尤其當(dāng)內(nèi)容是動(dòng)態(tài),高度不確定的時(shí)候。我們使用一些比較好的手機(jī)APP(如微信)的時(shí)候一定不會(huì)有這樣的感覺,整個(gè)交互流程都是很流暢的,就像山澗的泉水,涓涓細(xì)流到山腳,而不是巨人在峽谷走路的感覺。
所以,如果菊花的呈現(xiàn)到內(nèi)容的展示能夠通過自然的動(dòng)畫過渡呈現(xiàn),勢必會(huì)增強(qiáng)用戶體驗(yàn)。
而動(dòng)態(tài)內(nèi)容呈現(xiàn)主要變化的關(guān)鍵因素就是——高度,而過渡效果最佳利器是CSS3 transition, 于是,腦中不禁疑問,是不是可以借助CSS3 transition實(shí)現(xiàn)動(dòng)態(tài)內(nèi)容的高度動(dòng)畫呈現(xiàn),漸進(jìn)增強(qiáng)用戶體驗(yàn)。
其實(shí),早在12年的時(shí)候,我就開始了這方面的嘗試,若有興趣可以查看此文:“更多|收起交互中漸進(jìn)使用transition動(dòng)畫”。我自己也瞅了瞅,發(fā)現(xiàn)當(dāng)年的我講廢話的本領(lǐng)甩了現(xiàn)在的我兩條長安街。大家直接從Part5 看就好了。 其中,受限于當(dāng)年略顯稚嫩的技術(shù),里面獲得容器高度的方法,有些傻,大家就假裝沒看到。
二、CSS3 transition的難點(diǎn)
如果直接一行CSS代碼就可以讓動(dòng)態(tài)呈現(xiàn)動(dòng)畫化,那就不需要本文了,早就各個(gè)站點(diǎn)都是這類優(yōu)質(zhì)體驗(yàn)的交互了。究其根本就是CSS3 transition的一個(gè)局限性,對"auto"*冷淡!嘛意思?
大家很好理解,所謂“過渡”,就是從一個(gè)地方到另外一個(gè)地方,比方說,從0到100. 但是,你來個(gè)從0到auto, 傻眼了吧。大學(xué)時(shí)看過一部美國科幻片《心靈傳輸者》,其中男主也不是想瞬間位移就瞬間位移的,也是需要知道目的地和路徑的。
然而,當(dāng)我們在一個(gè)div呈現(xiàn)動(dòng)態(tài)內(nèi)容的時(shí)候,由于我們并不知道里面的內(nèi)容(都說了是動(dòng)態(tài)的嘛),所以,我們的height其實(shí)都是auto,于是,就算transition: height .35s走起,也不會(huì)有動(dòng)畫效果的,我們需要的是固定值。
于是難點(diǎn)和關(guān)鍵點(diǎn)來了,如何賦予固定高度值?
三、固定高度值與transition觸發(fā)
說白了很簡單,當(dāng)前高度固定值,獲得動(dòng)態(tài)內(nèi)容載入后的高度固定值,再style設(shè)置,over~
代碼細(xì)節(jié)我就不講了,其實(shí)沒什么人關(guān)心的,“我需要的是代碼,代碼!”估計(jì)很多人心里是這么咆哮的。
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你是寫在CSS中的,time參數(shù)可以不要,例如:
funTransitionHeight名字如果你不喜歡,可以自己改掉。IE9+有效,IE10+有動(dòng)畫,IE6~IE8老樣子,所謂漸進(jìn)增強(qiáng)。
百聞不如一見,您可以狠狠地點(diǎn)擊這里:不定高度動(dòng)態(tài)元素height CSS3 transition過渡demo
點(diǎn)擊頁面上“點(diǎn)擊我”按鈕,里面就有有高度不固定內(nèi)容呈現(xiàn),大伙兒就可以看到內(nèi)容呈現(xiàn)時(shí)候不是砰砰砰了,而是歘歘歘~
如何調(diào)用?很簡單,初始化時(shí)候funTransitionHeight()一下,賦個(gè)固定值;然后每次菊花完畢,內(nèi)容載入后在funTransitionHeight()一下,動(dòng)畫就來啦。也就是說,相比你們以前的JS代碼,就多了一行funTransitionHeight(element)調(diào)用而已,是不是實(shí)用又低成本!
相關(guān)文章
- 本篇文章主要介紹了詳解純CSS3制作的20種loading動(dòng)效,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-07-05
- 這篇文章主要為大家詳細(xì)介紹了CSS3實(shí)現(xiàn)10種Loading效果,效果實(shí)現(xiàn)簡單新穎,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2016-07-11
CSS3輕松實(shí)現(xiàn)清新 Loading 效果的簡單實(shí)例
下面小編就為大家?guī)硪黄狢SS3輕松實(shí)現(xiàn)清新 Loading 效果的簡單實(shí)例。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-06-06使用CSS3制作餅狀旋轉(zhuǎn)載入效果的實(shí)例
這篇文章主要介紹了使用CSS3制作餅狀旋轉(zhuǎn)載入效果的實(shí)例,作者生動(dòng)地將其比作攤雞蛋煎餅般的動(dòng)畫效果,需要的朋友可以參考下2015-06-238款使用 CSS3 實(shí)現(xiàn)超炫的 Loading(加載)的動(dòng)畫效果
本文給大家總結(jié)分享了8款使用 CSS3 實(shí)現(xiàn)超炫的 Loading(加載)的動(dòng)畫效果,十分的炫酷,也非常實(shí)用,這里推薦給小伙伴們,希望大家能夠喜歡。2015-03-17純CSS3實(shí)現(xiàn)的8種Loading動(dòng)畫效果
這篇文章主要介紹了純CSS3實(shí)現(xiàn)的8種Loading動(dòng)畫效果,效果簡潔、超酷、符合當(dāng)前前端的流行風(fēng)格,需要的朋友可以參考下2014-07-05使用css3實(shí)現(xiàn)超炫的loading加載動(dòng)畫效果
這篇文章主要介紹了使用css3實(shí)現(xiàn)超炫的loading加載動(dòng)畫效果,需要的朋友可以參考下2014-05-07css3如何繪制一個(gè)圓圓的loading轉(zhuǎn)圈動(dòng)畫
這篇文章主要介紹了css3如何繪制一個(gè)圓圓的loading圈的相關(guān)資料,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-01-09