2

要素を表示から非表示にフェードしたい。

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

element {
  opacity:1;
}

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

これに関する問題は、(現在) 非表示の要素がまだ存在し、スペースを占有していることです。

設定されているかのように、フェードしてから完全に消えてほしいdisplay:noneです。

4

2 に答える 2

1

JavaScript タイムアウトを 0.5 秒に設定し、追加の CSS を追加するだけです

var element = document.getElementsByClassName(fade)[0];
setTimeout(function() {        
    element.style.display="none"; 
}, 500);
于 2011-07-17T02:18:43.727 に答える
1

イベントをフックしてtransitionEnd、フェードが終了したらdisplay: none、そのイベント ハンドラーで設定できます。または、スペースを取らない要素で終了する別の種類のトランジションを使用できます (高さを 0 にトランジションするなど)。

トランジションの最後をフックするには、次のようなものを使用します。

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

他のブラウザーでは、transitionEnd イベントで他のプレフィックスを使用します。

于 2011-07-17T02:18:58.217 に答える