5

OK みんな、ここに問題があります: 私は 3 つのメニュー項目でこの単純なメニューを作成しました。ホバーするたびに各 div を右に移動したい (単純ですよね? 残念ながらそうではありません...)

イーズイン アニメーションは実行されますが、イーズアウト アニメーションはまったく実行されず、結果は流動的ではなく、ブロック状でまったくクールではありません。

私もオンラインと StackOverflow で検索し、行われたすべての修正/提案を適用しましたが、機能させることができませんでした。

コードは次のとおりです（たとえば、jsFiddleで試すため）

HTML:

<div id="menu-container">
   <div class="menu1">Menu 01</div>
   <div class="menu2">Menu 02</div>
   <div class="menu3">Menu 03</div>
</div>

CSS:

#menu-container div{
    height: 30px;
    width: 200px;
    border:1px solid #999;
    background-color:#222;
    color:#ccc;
    left: 0;
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
}

#menu-container div:hover{
    position: relative;
    color:#fff;
    background-color:#333333;
    left: 20px;
    padding-left: -20px;
}

#menu-container div.menu1:hover{
    border-color: red;
}

#menu-container div.menu2:hover{
    border-color: blue;
}

#menu-container div.menu3:hover{
    border-color: green;
}

私は何を間違っていますか？それを修正する方法はありますか？

前もって感謝します

4

2 に答える 2

6

これは、div がposition: relativeホバー時のみであり、アニメーション化できないためです。leftに戻すと、オンのアニメーション効果は失われますposition: static。position: relativeホバーされていないスタイルに追加するだけです。

http://jsfiddle.net/Pre5p/

于 2013-08-20T23:59:38.437 に答える
5

そのようなアニメーションに対するブラウザーのサポートに応じて、transform: translate を使用する必要があります。はるかに滑らかなアニメーションが得られます...

#menu-container div:hover{
    color:#fff;
    background-color:#333333;

    -webkit-transform: translateX(20px); 
    -moz-transform: translateX(20px); 
    -ms-transform: translateX(20px); 
    -o-transform: translateX(20px); 
    transform: translateX(20px); 
}
于 2013-08-21T06:13:58.467 に答える