帶轉換功能的Javascript可見性功能

Question

我爲div使用了可見性來隱藏或顯示JavaScript的on-click功能。我如何添加一個轉換到這個函數，所以我的div不會顯得太突然？

function about() 
{ 
    var elem = document.getElementById('about'); 
    elem.style.visibility = "visible"; 
} 

Answer 1

溶液1（CSS3 + JS）：

CSS：

#about{ transition:all ease 2s; opacity:0;} 

和js：

function about() 
{ 
    document.getElementById('about').style.opacity = 1; 
} 

溶液2（JS只）：

function about() 
{ 
(function reveal(val){ 
    document.getElementById('about').style.opacity = val; 
    if(val<1) setTimeout(reveal,1,val+0.001); 
})(0); 
} 

注意：只能切換可見性（開/關）。不透明度定義了您可以「看低谷」的程度，它從0（沒有任何可見）到1（全部可見）...