前端與移動開發(fā)：H5C3-過渡效果失效的問題小結(jié)

1、過渡效果的基礎(chǔ)知識

問題1：在原生的html中，如何實現(xiàn)一個元素的過渡效果?

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

在上面的代碼中，transition的值為 width 2s linear ，它分別代表了3個方面的設置。

第一個：width，代表了當這個div的寬度width這個屬性，只要這個值發(fā)生了改變，那么就會有過渡效果。

第二個：2s，這個代表了過渡的時長。既然是過渡，那就是一個慢慢變化的過程，那這個過程的時間是多長呢，就是這個值所決定的。

第三個：linear，這個代表了過渡的變化曲率。簡單的來說，是過渡是勻速進行的。Width從一個值慢慢的變到另外一個值，是勻速變化的。還有其他的取值比如ease、ease-in、ease-out等

上面的代碼如果不使用簡寫的話，那么它的完整寫法應該如下：

transition-property過渡屬性

transition-duration過渡時長

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

需要注意的是，我們在css樣式中設置了transition相關(guān)的屬性不代表它立馬就有過渡效果了，我們只是制定了規(guī)則而已：當什么屬性的值發(fā)生改變之后將會有幾秒的過渡效果。紅色文字就是我們制定的規(guī)則。

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

問題2：要實現(xiàn)一個元素的過渡效果，最少需要設置幾個css屬性

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

2、過渡效果失效的幾種場景

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

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

有些人會通過display的none和block來控制一個元素的顯示和隱藏，而他又想在display從none變?yōu)閎lock或者從block變?yōu)閚one的時候有過渡效果，于是乎他就會這樣寫：

他將transition-property寫為了display，這樣做完之后，當元素顯示切換到隱藏的時候是不會有過渡效果的。因為display的取值不是連續(xù)值。而之前案例中的width就是連續(xù)值，可以從1px、2px、3px。。。1000px進行取值。

(2)過渡的屬性沒有設置初始值

我們對過渡的定義是這樣的：以width為例，當width這個屬性值發(fā)生改變的時候，將會有一段時間的過渡效果慢慢的改變，慢慢的從原始值變?yōu)槲覀兘o它設置的值。

有一種場景大家比較容易忘，如下：

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

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

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

$.ajax({

type:"get",

url:"/getData.php",

dataType:"json",

success:function(data){

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

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

//此時，立馬改變html中元素的屬性，就算這個屬性有過渡規(guī)則，可能也會失效

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

divElt.style.height = "200px";

}

});

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

對此我們可能會做如下操作：

$.ajax({

type:"get",

url:"/getData.php",

dataType:"json",

success:function(data){

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

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

//此時，立馬改變html中元素的屬性，就算這個屬性有過渡規(guī)則，可能也會失效

setTimeout(function(){

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

divElt.style.height = "200px";

},200);

}

});