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

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)寫的話，那么它的完整寫法應(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)聽中改變這個(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ì)這樣寫：

他將transition-property寫為了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ù)伍_的。我們也給它設(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);

}

});