Javascript visibility function with transition

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（すべて可視）になります。