全國(guó)咨詢(xún)/投訴熱線:400-618-4000

首頁(yè)技術(shù)文章正文

前端與移動(dòng)開(kāi)發(fā):H5C3-過(guò)渡效果失效的問(wèn)題小結(jié)

更新時(shí)間:2018-01-05 來(lái)源:黑馬程序員 瀏覽量:

1、過(guò)渡效果的基礎(chǔ)知識(shí)

問(wèn)題1:在原生的html中,如何實(shí)現(xiàn)一個(gè)元素的過(guò)渡效果?

答:在原生的html中,如果要讓一個(gè)元素實(shí)現(xiàn)過(guò)渡效果,那么我們需要做一件事情,給這個(gè)元素設(shè)置一個(gè)css樣式,transition,例如:

在上面的代碼中,transition的值為 width 2s linear ,它分別代表了3個(gè)方面的設(shè)置。

第一個(gè):width,代表了當(dāng)這個(gè)div的寬度width這個(gè)屬性,只要這個(gè)值發(fā)生了改變,那么就會(huì)有過(guò)渡效果。

第二個(gè):2s,這個(gè)代表了過(guò)渡的時(shí)長(zhǎng)。既然是過(guò)渡,那就是一個(gè)慢慢變化的過(guò)程,那這個(gè)過(guò)程的時(shí)間是多長(zhǎng)呢,就是這個(gè)值所決定的。

第三個(gè):linear,這個(gè)代表了過(guò)渡的變化曲率。簡(jiǎn)單的來(lái)說(shuō),是過(guò)渡是勻速進(jìn)行的。Width從一個(gè)值慢慢的變到另外一個(gè)值,是勻速變化的。還有其他的取值比如ease、ease-in、ease-out等

上面的代碼如果不使用簡(jiǎn)寫(xiě)的話,那么它的完整寫(xiě)法應(yīng)該如下:

transition-property過(guò)渡屬性

transition-duration過(guò)渡時(shí)長(zhǎng)

transition-timing-function 過(guò)渡的時(shí)間函數(shù)

需要注意的是,我們?cè)赾ss樣式中設(shè)置了transition相關(guān)的屬性不代表它立馬就有過(guò)渡效果了,我們只是制定了規(guī)則而已:當(dāng)什么屬性的值發(fā)生改變之后將會(huì)有幾秒的過(guò)渡效果。紅色文字就是我們制定的規(guī)則。

因此要真正看到過(guò)渡效果,我們還需要有觸發(fā)條件,比如我們點(diǎn)擊一個(gè)按鈕,在按鈕的點(diǎn)擊事件監(jiān)聽(tīng)中改變這個(gè)div的寬度值,這時(shí)候我們才能看到慢慢變化的過(guò)渡效果。

問(wèn)題2:要實(shí)現(xiàn)一個(gè)元素的過(guò)渡效果,最少需要設(shè)置幾個(gè)css屬性

答:在過(guò)渡的樣式設(shè)置中,上面講了3個(gè)屬性,如果你比較懶,不想設(shè)置這么多個(gè)值,那么你最少得設(shè)置一個(gè)屬性,那就是transition-duration 過(guò)渡時(shí)長(zhǎng)。transition-property的默認(rèn)值為all,all的含義代表所有的屬性,所有的屬性發(fā)生了值得改變,那么都會(huì)有過(guò)渡效果。不過(guò)不是太建議使用all這個(gè)值,因?yàn)檫@樣有可能會(huì)出現(xiàn)我們預(yù)期之外的效果。

2、過(guò)渡效果失效的幾種場(chǎng)景

(1)過(guò)渡的屬性的取值非連續(xù)性

過(guò)渡效果對(duì)于width、left、height、opacity、padding、margin等屬性都可以適用,但是對(duì)于一些非連續(xù)值得屬性無(wú)法使用,典型的例子就是display

有些人會(huì)通過(guò)display的none和block來(lái)控制一個(gè)元素的顯示和隱藏,而他又想在display從none變?yōu)閎lock或者從block變?yōu)閚one的時(shí)候有過(guò)渡效果,于是乎他就會(huì)這樣寫(xiě):

他將transition-property寫(xiě)為了display,這樣做完之后,當(dāng)元素顯示切換到隱藏的時(shí)候是不會(huì)有過(guò)渡效果的。因?yàn)閐isplay的取值不是連續(xù)值。而之前案例中的width就是連續(xù)值,可以從1px、2px、3px。。。1000px進(jìn)行取值。

(2)過(guò)渡的屬性沒(méi)有設(shè)置初始值

我們對(duì)過(guò)渡的定義是這樣的:以width為例,當(dāng)width這個(gè)屬性值發(fā)生改變的時(shí)候,將會(huì)有一段時(shí)間的過(guò)渡效果慢慢的改變,慢慢的從原始值變?yōu)槲覀兘o它設(shè)置的值。

有一種場(chǎng)景大家比較容易忘,如下:

在上訴的代碼中,我們給div設(shè)置了寬度,但是并沒(méi)有設(shè)置高度height,它的高度其實(shí)是由子元素?fù)伍_(kāi)的。我們也給它設(shè)置了過(guò)渡規(guī)則,當(dāng)height的值發(fā)生改變的時(shí)候,會(huì)擁有過(guò)渡效果。在js代碼中我們響應(yīng)了一個(gè)按鈕的點(diǎn)擊事件,在點(diǎn)擊事件中改變了div的高度,但是你們會(huì)發(fā)現(xiàn),高度的變化并沒(méi)有過(guò)渡效果。原因是在于我們并沒(méi)有在css樣式中或者行內(nèi)樣式中設(shè)置過(guò)div的height屬性,相當(dāng)于它沒(méi)有初始值,它就不知道從什么值慢慢過(guò)渡到200px,這個(gè)是很多人都會(huì)忽略的并且不好找的錯(cuò)誤。

(3)過(guò)渡的屬性的值改變得太猝不及防

有時(shí)候我們使用ajax獲取服務(wù)器數(shù)據(jù),然后使用模板引擎將數(shù)據(jù)渲染成html片段,放到界面中。

$.ajax({

type:"get",

url:"/getData.php",

dataType:"json",

success:function(data){

var html = template("dataTemplate",data);

$(".container").html(html);

//此時(shí),立馬改變html中元素的屬性,就算這個(gè)屬性有過(guò)渡規(guī)則,可能也會(huì)失效

var divElt = document.querySelector("div");

divElt.style.height = "200px";

}

});

如上述代碼所示,在局部渲染網(wǎng)頁(yè)之后,立馬改變html中元素的屬性,就算這個(gè)屬性有過(guò)渡規(guī)則,可能也會(huì)失效

對(duì)此我們可能會(huì)做如下操作:

$.ajax({

type:"get",

url:"/getData.php",

dataType:"json",

success:function(data){

var html = template("dataTemplate",data);

$(".container").html(html);

//此時(shí),立馬改變html中元素的屬性,就算這個(gè)屬性有過(guò)渡規(guī)則,可能也會(huì)失效

setTimeout(function(){

var divElt = document.querySelector("div");

divElt.style.height = "200px";

},200);

}

});


本文版權(quán)歸黑馬程序員前端與移動(dòng)開(kāi)發(fā)學(xué)院所有,歡迎轉(zhuǎn)載,轉(zhuǎn)載請(qǐng)注明作者出處。謝謝!

作者:黑馬程序員前端與移動(dòng)開(kāi)發(fā)培訓(xùn)學(xué)院

首發(fā):http://web.itheima.com/

分享到:
在線咨詢(xún) 我要報(bào)名
和我們?cè)诰€交談!