4

私は個人的な使用のために構築しているウェブサイトを持っています。この Web サイトには、CSS3 アニメーションによってアニメーション化されるドロップダウン メニューがあります。順序付けられていないリスト内のリスト項目がドロップダウンの高さに対して表示/非表示ではないことに気付くまで、結果のルックアンドフィールを非常に楽しんでいました. 私が求める情報は、これを解決する方法です。とても単純に見えるものに時間を費やしてきたことを考えると、非常に面倒です...

関連する HTML:

<ul class="dMaster">
    <li class="dChild"><a href="index.php" class="bItem" id="homeItem">Home</a></li>
    <li class="dChild" style="cursor: default;">About
        <ul class="dMaster2">
            <li class="dChild2"><a href="about.php" class="bItem" id="gAboutItem">General</a></li>
            <li class="dChild2"><a class="bItem" id="twItem" target="_blank">Twitter</a></li>
            <li class="dChild2"><a class="bItem" id="ytItem" target="_blank">YouTube</a></li>
        </ul>
    </li>
</ul>

関連する CSS:

@keyframes dropdown {
    from { height: 0px; }
    to { height: 77px; }
} @-webkit-keyframes dropdown {
    from { height: 0px; }
    to { height: 77px; }
}
.dMaster {
    margin: 0;
    padding: 0;
    text-align: center;
} .dChild {
    margin: 0;
    padding: 0;
    height: 19px;
    width: 60px;
    float: left;
    list-style: none;
} .dChild:hover {
    color: #000;
    background: #C60;
    border: 1px solid #FFF;
    border-top: none;
    text-shadow: 1px 1px 5px #FFF;
} .dMaster2 {
    padding: 0;
    position: absolute;
    min-width: 60px;
    text-align: center;
    background: #C60;
    border: 1px solid #FFF;
    margin: -2px 0  0 -1px;
    visibility: hidden;
} .dChild2 {
    opacity: 0.5;
    padding: 2px 5px;
    list-style: none;
    -webkit-transition: opacity 0.4s;
    -moz-transition: opacity 0.4s;
    -o-transition: opacity 0.4s;
} .dChild2:hover {
    opacity: 1.0;
} ul li:hover ul {
    color: #FFF;
    visibility: visible;
    animation: dropdown 0.2s ease-out;
    -webkit-animation: dropdown 0.2s ease-out;
}

さまざまなテクニックを 1 時間か 2 時間試しましたが、うまくいきませんでした。必要に応じて、ここに JSFiddle があります。どんな助けでも大歓迎です！

補足:ドロップダウン メニューは [バージョン情報] にあります。最初はわかりにくいかもしれませんが、UL が下に伸びていると、List Items がよく見えます。

4

2 に答える 2

2

それがあなたが探しているものかもしれませんか？

基本的には、transition-delay行ごとに異なるものを使用します。

前回のフィドルでそうしなかったとき、私はこのフィドルですべてをより明確にするために努力しました。ビューの良い点については、2番目を実際に確認する必要があります。

目標は、それらを一度に 1 つずつ表示することです。そのための2つのソリューション：

  1. 行ごとに一意の ID
  2. nth-child を使用して各行を取得します。

3 秒で表示する 3 つのアイテムがあるとします。これが私たちのタイムラインです：

t      Action
_____________
0 | The rectangle begins to display.
  |
1 | Rectangle at 1/3 of its height. We display our item n° 1.
  |
2 | Rectangle at 2/3 of its height. We display our item n° 2.
  |
3 | Rectangle at 3/3 of its height. We display our item n° 3.
  v

コードをレビューしましょう:

HTML

<a>Hover me</a>

<ul>
    <li>Hey</li>
    <li>Hi</li>
    <li>Ho</li>
</ul>

私たちの目標は単純です:

タグの上にマウスをドラッグすると、 と さまざまな要素<a>が徐々に表示されるようにします。さらに、マウスがメニューの上にある場合はそのままにしておき、マウスがまたはの外に出るとすぐに消えるようにします。<ul><li><a><ul>

CSS

基本

ul { /* Hidden and width no height */
    visibility: hidden;
    background-color: white;
    height: 0px;
    border: 1px solid black;
}

a:hover ~ ul { /* When the mouse goes over the <a> it becomes visible and begins the transition */
    visibility: visible;
    background-color: orange;
    height: 60px;
    transition: height 3s;
}

ここで、「トリッキーな部分」に進みます。

a:hover ~ ul li { /* Default behaviour for appearing */
    opacity: 1;
    transition: opacity 0.2s;
}

/* And now for each child, its custom delay :*/

a:hover ~ ul li:nth-child(1) {
    transition-delay: 1s;
}

a:hover ~ ul li:nth-child(2) {
    transition-delay: 2s;
}

a:hover ~ ul li:nth-child(3) {
    transition-delay: 3s;
}

そしてタダァァム！簡単！

反対側では、それらが徐々に消えないようにするには:

/* To make the depop instantly */

a ~ ul li {
    opacity: 0;
    transition-delay: 0s;
}

a ~ ul li:nth-child(1) {
    transition-delay: 0s;
}

a ~ ul li:nth-child(2) {
    transition-delay: 0s;
}

a ~ ul li:nth-child(3) {
    transition-delay: 0s;
}

そして、どうぞ。もちろん、これはそれほど動的ではありません。子供ごとにこれを行う必要がある場合は、すぐに退屈になります。ただし、スクリプトを使用してそのコードを生成できます。:)

それが役に立ったことを願っています。

于 2013-06-05T10:15:53.177 に答える