1

2つの主要な要素があります。1行に選択ボックスがあるテキストと、別の行にgifスピナー画像があるdivです。最初は、スピナーをdisplay：noneに設定しています。

これは大規模なエンタープライズアプリケーションの一部ですが（したがって、イベント処理などはここでは実際には問題になりません）。しかし、何らかのイベントが発生するたびに（つまり、ボタンをクリックする）、私がやりたいことは次のとおりです。

  1. 非表示のスピナー要素は、行全体を大きくすることなく、テキスト+選択ボックスで行を完全にカバーするように移動します。理想的には、テキスト+選択ボックスがカバーする正確なスペースにぴったり収まる必要があります。
  2. スピナーをスムーズにフェードインし、背景要素を100％白にフェードアウトします

http://jsfiddle.net/Dh4vb/15/
コード：

<div id="wrapper">
    on the <select id="select"></select> of the Month
<div id="spinner"></div>
</div>​

#wrapper {
    margin: 50px;
}

#spinner {
    width: 150px;
    height: 25px;
    background-image: url('http://fedoraproject.org/w/uploads/2/29/Artwork_DesignService_fedora-spinner.gif');
    background-repeat:no-repeat;
    background-size:contain;
    background-position:center; 

    -webkit-transition: opacity .5s ease-in-out;
    -moz-transition: opacity .5s ease-in-out;
    -o-transition: opacity .5s ease-in-out;
    transition: opacity .5s ease-in-out;
    display:none;
}

</ p>

4

1 に答える 1

2

あなたはそれがここで働くのを見ることができます：http：//jsfiddle.net/jfriend00/8MJH4/。デモではトランジション時間を長くして、トランジションが機能していることをより明確に確認できるようにしました。トグルとして機能するもう少し高度なバージョンは次のとおりです：http：//jsfiddle.net/jfriend00/kwr4m/。

スピナーを絶対位置に配置しますが（つまり、テキストの上部に配置します）、最初opacity: 0は表示されません。次に、テキスト0の不透明度をに、スピナーの不透明度をに変更する1と、両方とも不透明度CSSトランジションに設定されます。コードは次のとおりです。

JS：

function run() {
    var spinner = document.getElementById("spinner");
    var fadeText = document.getElementById("fadeText"); 

    // make spinner visible
    spinner.style.opacity = 1;

    // make text not visible
    fadeText.style.opacity = 0;
}​

HTML：

<button id="go" onclick="run()">Go</button>
<div id="wrapper">
    <div id="fadeText" class="fadeTransition">
    on the <select id="select"></select> of the Month
    </div>
    <div id="spinner" class="fadeTransition"></div>
</div>​

CSS：

#wrapper {
    margin: 50px;
    position: relative;
}

#spinner {
    position: absolute;
    top: 0;
    bottom: 0;
    opacity: 0;
    width: 150px;
    height: 25px;
    background-image: url('http://fedoraproject.org/w/uploads/2/29/Artwork_DesignService_fedora-spinner.gif');
    background-repeat:no-repeat;
    background-size:contain;
    background-position:center; 
}

.fadeTransition {
    -webkit-transition: opacity 2s ease-in-out;
    -moz-transition: opacity 2s ease-in-out;
    -o-transition: opacity 2s ease-in-out;
    transition: opacity 2s ease-in-out;
}
​
于 2012-11-10T17:01:25.913 に答える