CSS遷移フェード要素

要素を表示から非表示にフェードアウトさせたい。CSS遷移フェード要素

私は私が使用してこれを行うことができます知っている：

element { 
    opacity:1; 
} 

element.fade { 
    opacity:0; 
    transition: opacity .5s linear; 
}

これに伴う問題は、（今）目に見えない要素がスペースを取って、まだ存在していることです。

私はそれがフェードインし、その後display:noneが設定された場合のように、完全に消滅したいと思います。

余分なCSSを追加します。または、スペースを取らない要素で終わる別のタイプのトランジションを使用することもできます（高さを0に変えるなど）。

は、トランジションの終わりをフックするために、あなたはこのようなものを使用したい：

// for webkit browsers 
node.addEventListener('webkitTransitionEnd', function() { 
     // set to display: none here 
    }, false);

使用する他のプレフィックスを他のブラウザのためのtransitionEndイベントに。

2011-07-17 02:18:58 jfriend00

。 – Kornel

@porneL - はい、適切なブラウザ固有の接頭辞をtranstionEndイベントで使用する必要があります。 – jfriend00

は0.5秒でJavaScriptのタイムアウトを設定し、ちょうどあなたがtransitionEndイベントをフックすることができますし、フェードが終了すると、あなたはそのイベントハンドラでdisplay: noneを設定することができます

var element = document.getElementsByClassName(fade)[0]; 
setTimeout(function() {   
    element.style.display="none"; 
}, 500);

2011-07-17 02:18:43 cmplieger

はこのためにJSを使用しないでください。それはGPUを利用せず、COOLではありません。

これはあなたが何であるか後：WebKitの専用だが、CSSの遷移は今、すべての主要なブラウザでサポートされている

2011-11-08 10:27:05 vsync

答えて