0

私はこのCSSを持っています:

div#dockWrapper{
    width: auto;
    display: inline-block;
    position: relative;
    border-bottom: solid 2px rgba(255, 255, 255, .35);
    line-height: 0; 
    transition: bottom 0.5s;
    -webkit-transition: bottom 0.5s;
    -moz-transition: bottom 0.5s;
}

div#dockWrapper:hover{
    bottom: 77px;
}

そしてこのHTML

<div id="dockContainer">
    <div id="dockWrapper">
        <div class="cap left">                  
        </div>
        <ul class="osx-dock">
            <li>
            </li>
        </ul>   
    </div>
</div>

Google chrome ではトランジションは正常に機能しますが、Firefox や IE では機能しません。この CSS3 アニメーションはすべて初めてなので、いくつかの基本を理解する必要があるかもしれません。に他のアニメーションがあります

<li></li>

HTMLメニューの「ドック」を作成し、すべてのブラウザーで正常に機能しますが、「ドックラッパー」の「下」のブラウザーでは機能しません。

ありがとう、サイモン

4

2 に答える 2

0

Firefox/Chrome 以外のブラウザーの場合-o-transitionは、古いバージョンの Opera が動作transitionするようにする と、IE10 が動作するようになる を追加しました。IE9 はトランジションをサポートしていません。

ただし、Firefox では、X と Y の両方の開始位置を明示的に宣言する必要があります。これを試して：

#dockWrapper{
    width: auto;
    display: inline-block;
    position: relative;
    left:0;
    bottom:0;
    border-bottom: solid 2px rgba(255, 255, 255, .35);
    line-height: 0; 
    transition: bottom 0.5s;
    -webkit-transition: bottom 0.5s;
    -moz-transition: bottom 0.5s;
    -o-transition: bottom 0.5s;
    transition: bottom 0.5s;
}

以前にメニュー項目をアニメーション化するのと同じ問題があり、明示的な X/Y 宣言を適用すると解決しました。うまくいけば、それはあなたにも当てはまります。

補足として、div前に修飾子を削除しました#dockWrapper。HTML が有効である限り、複数の ID 宣言は存在しないため、ID を修飾する必要はありません。CSS が遅くなるだけで、何のメリットもありません。

于 2013-06-20T19:23:15.610 に答える
0

に追加bottom: 0しdiv#dockWrapper{ます。移行する場所が必要です。

http://caniuse.com/#feat=css-transitionsによると、IE10+ のみがこのtransitionプロパティをサポートしています。

于 2013-06-20T19:23:58.093 に答える