1

カーソルを合わせるとドロップダウンセクションが表示されるバナーのコードがあります。

以下のHTMLコード：

<div id="top_wrapper" class="hori_wrapper wrapper">
    <div id="top" class="hori_banner banner"></div>
    <div id="top_reveal" class="hori_reveal reveal"></div>
</div>

そしてCSS：

.wrapper {
border: dashed;
position: relative;
}

.banner {
background: blue;
position: relative;
}

.reveal {
background: red;
position: absolute;
z-index: 1;
}

.hori_wrapper {
width: 300px;
height: 50px;
clear: both;
}

.hori_banner {
width: 300px;
height: 50px;
}

.hori_reveal {
width: 300px;
height: 0px;
}

#top:hover + #top_reveal, #top_reveal:hover {
-webkit-transition: height 1s ease-in .5s;
-o-transition: height 1s ease-in .5s;
-moz-transition: height 1s ease-in .5s;
-transition: height 1s ease-in .5s;
height: 300px;
top: 50px;
}

基本的に、私が知りたいのは、CSSは、他の方向ではなく、下向きにアニメーション化する必要があるとどのように判断するのかということです。

ありがとう！

4

1 に答える 1

0

発生するのは、プロパティが正常に設定された場合に発生することに移行することだけです。

つまり、高さが300ピクセル、上部が50ピクセルの場合、どのようになりますか？

これほど複雑なことはありません。そのため、トランジションをサポートしていないブラウザでも、アニメーションがなくても機能します。

于 2012-08-22T18:40:31.503 に答える