2

ボタンをクリックするとフェードイン/フェードアウトするメニューを作成しようとしています。また、CSS トランジションを使用してアニメーションを実行しようとしています。

ここに私が達成したいもののサンプルがあります

#menu{
    background: red;
    display: block;    
    overflow: hidden;   
    position: absolute;
    width: 182px;
    top: 1em;
    padding: 0;
    height: auto;
    opacity: 0;
    /* The menu must not be clickable/cover the UI once hidden */
    left: -100000px;

    /*
    The left property must change after the 
    opacity is zero and before it starts to
    increase
    */
    transition: opacity 0.25s 0.1s, left 0s; /* ??? */
    -webkit-transition: opacity 0.25s 0.1, left 0s; /* Safari */
}

#menu.open{
    opacity: 1;
    left: auto;
}

http://jsfiddle.net/AzKAk/5/

もちろん、それは途中でしか機能しません。メニューが表示されるとフェードインしますが、フェードアウトする必要がある場合は、要素が適切な位置に配置された後に発生する必要があります。

CSS3だけでそんなことできるの？

4

1 に答える 1

2

あなたの意図は、メニューを動かさずにその場で表示/非表示にすることだと思います。

これを行うには、実際には と の 2 つのプロパティを組み合わせて使用​​する必要がopacityありdisplayます。

不透明度の変更によりメニューが非表示になりますが、到達opacity:0すると非表示になりますが、存在し、ユーザーの操作を受け取ります。

そのため、不透明度の移行が完了したら、を に変更する必要があることを確認する必要がありdisplayますnone。

transitionendイベントを使用してこれを行うことができます( webkitTransitionEndChome/Safari)。

コードは次のようになります: http://jsfiddle.net/daniran/GfbVV/

ontransitionendこの例では jQuery を使用していますが、プロパティを使用してリスナーを直接簡単に登録することもできます。

于 2013-08-02T09:35:29.103 に答える