表示ブロックと不透明度

Question

私は、使用中でないときにdisplay:noneを持っていなければならないホバリングメニューを持っているので、その下のものをクリックすることができます。

これを開くときに、ディスプレイをインラインブロックにします。そしてその後、CSSの遷移用いて不透明にフェード - このコードで：

elm.onmouseover = function(){ 
    menu.style.display = "inline-block"; 
    menu.style.opacity = 1; 
}; 

このコードを実行ない場合、要素は、任意のフェードなしで真っ直ぐにポップ。

私の理論は、JavaScriptの要素が時間によって不透明度の変更キックを表示タイプを変更していないので、私はこれをしなかったことをとても速く走るということであった：

elm.onmouseover = function(){ 
    menu.style.display = "inline-block"; 
    for (var i=1000...; i--;); 
    menu.style.opacity = 1; 
}; 

それが今目に見えて待ちます。しかし、まだ消えずにポップインします。

私は私のコンソールに行き、走っ：

menu.style.display = "inline-block"; 
menu.style.opacity = 1; // run 
> return message 

をし、それが仕事をdidntの。私はこの

menu.style.display = "inline-block"; // run 
> return message 

menu.style.opacity = 1; // run 
> return message 

のように二つに文を分割するときしかし、それは正常に動作し、2つの間の遅延は、forループによって引き起こされるものよりもはるかに少ないです。

この動作の根源は何ですか？私はうんざりしている。

Answer 1

DOM は、メインスレッドと同期しているため、コード全体が終了するとリフレッシュされます。あなただけのsetTimeoutと1msのを待っていれば

、あなたが期待しているものを、動作します：

elm.onmouseover = function() { 
    menu.style.display = 'inline-block'; 
    setTimeout(function() { 
     menu.style.opacity = 1; 
    }, 1); 
} 

https://jsfiddle.net/vtd3y5ug/

Answer 2

display: noneとopacityをフェード効果に使用することはできません。

display: noneおよびdisplay: inline-blockの代わりに、visibility: hiddenおよびvisibility: visibleを使用してください。