更新時間:2018-01-05 來源:黑馬程序員 瀏覽量:
1、過渡效果的基礎知識
問題1:在原生的html中,如何實現(xiàn)一個元素的過渡效果?
答:在原生的html中,如果要讓一個元素實現(xiàn)過渡效果,那么我們需要做一件事情,給這個元素設置一個css樣式,transition,例如:
div{
width: 100px;
height: 100px;
transition:width 2s linear;
}
在上面的代碼中,transition的值為 width 2s linear ,它分別代表了3個方面的設置。
第一個:width,代表了當這個div的寬度width這個屬性,只要這個值發(fā)生了改變,那么就會有過渡效果。
第二個:2s,這個代表了過渡的時長。既然是過渡,那就是一個慢慢變化的過程,那這個過程的時間是多長呢,就是這個值所決定的。
第三個:linear,這個代表了過渡的變化曲率。簡單的來說,是過渡是勻速進行的。Width從一個值慢慢的變到另外一個值,是勻速變化的。還有其他的取值比如ease、ease-in、ease-out等
上面的代碼如果不使用簡寫的話,那么它的完整寫法應該如下:
div {
width: 100px;
height: 100px;
transition-property: width;
transition-duration: 2s;
transition-timing-function: linear;
}
transition-property過渡屬性
transition-duration過渡時長
transition-timing-function 過渡的時間函數(shù)
需要注意的是,我們在css樣式中設置了transition相關的屬性不代表它立馬就有過渡效果了,我們只是制定了規(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的時候有過渡效果,于是乎他就會這樣寫:
div {
width: 100px;
height: 100px;
transition-property: display;
transition-duration: 2s;
transition-timing-function: linear;
}
他將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);
}
});
本文版權歸黑馬程序員前端與移動開發(fā)學院所有,歡迎轉載,轉載請注明作者出處。謝謝!
作者:黑馬程序員前端與移動開發(fā)培訓學院
首發(fā):http://web.itheima.com/