0

クリックするとフェードインおよびフェードアウトするメニューを作成しようとしています。これはコードです：

HTML

<div id="trigger">CLICK</div>

<ul data-status="shown" id="navi">
  <li><a href="#">Link</a></li>
  <li><a href="#">Link</a></li>
</ul>

CSS

@keyframes fade {
    0% { opacity: 0; }
    100% { opacity: 1; display: block; }
}

ul {
  background: grey;
}

ul[data-status="shown"] {
   opacity: 1;
   animation: fade 2s;
}

ul[data-status="hidden"] {
    opacity: 0;
    animation: fade 2s;
    animation-direction: reverse;
}

ul[data-status="removed"] {
    display: none;
}

JavaScript

function myMenu () {
    var trigger = document.getElementById( 'trigger' ),
        menu = document.getElementById( 'navi' ),
        state = menu.getAttribute( 'data-status' );

    if ( state == 'shown' ) {
        menu.removeAttribute( 'data-status' );
        menu.setAttribute( 'data-status', 'removed' );
        state = menu.getAttribute( 'data-status' );
    }

    var toggle = function () {
        if ( state == 'shown' ) {
            menu.removeAttribute( 'data-status' );
            menu.setAttribute( 'data-status', 'hidden' );
            setTimeout( function() {
                menu.removeAttribute( 'data-status' );
                menu.setAttribute( 'data-status', 'removed' );
                state = menu.getAttribute( 'data-status' );
            }, 2000 );
        }

        if ( state == 'removed' ) {
            menu.removeAttribute( 'data-status' );
            menu.setAttribute( 'data-status', 'shown' );
            state = menu.getAttribute( 'data-status' );
        }
    };

    trigger.addEventListener( 'click', toggle, false );

}

myMenu();

例: http://jsbin.com/avUWUnO/1/edit

フェードインは期待どおりに機能しますが、フェードアウトは実際には存在せず、メニューが消えるだけです。それとも、クリックが速すぎるためでしょうか? 次に、そこに奇妙な遅延があります。エラーはおそらく私が使用している場所にありますがsetTimeout、何が問題なのかわかりません。

ステータスが非表示に設定され、CSS アニメーションが起動し、アニメーションが終了して 2 秒後にメニューが削除されます。これが期待どおりに機能しないのはなぜですか?

4

1 に答える 1

1

CSS プロパティにベンダー プレフィックスがありません。すべてanimationのセレクターとセレクターを変更し、 (chrome と safari) をkeyframe追加したところ、機能しました。-webkit-

ベンダー プレフィックスは-webkit-(safari、および chrome < 27 だと思います)、-o-opera < 17、IE10 はベンダー プレフィックスを修正した最初のブラウザーなので、心配する必要はありません。また、 -moz-firefox です。接頭辞付きのバージョンと接頭辞なしのバージョンの両方を必ず含めてください。

たとえば、変更したのは次の-webkit-とおりです。

@-webkit-keyframes fade {
  0% { opacity: 0; }
  100% { opacity: 1; display: block; }
}

@keyframes fade {
  0% { opacity: 0; }
  100% { opacity: 1; display: block; }
}

ul {
  background: grey;
}

ul[data-status="shown"] {
 opacity: 1;
 -webkit-animation: fade 2s;
 animation: fade 2s;
}

ul[data-status="hidden"] {
  opacity: 0;
  -webkit-animation: fade 2s;
  -webkit-animation-direction: reverse;
  animation: fade 2s;
  animation-direction: reverse;
}

ul[data-status="removed"] {
  display: none;
}

ただし、残りのプレフィックスを追加することもできます。

JSBin (これについては Zeaklous に感謝します。)

于 2013-10-19T13:48:36.870 に答える