4

最初は固定幅に設定されており、マウスオーバーでコンテンツに応じて自動幅に拡張する必要がある要素の、スクリプトを使用しない CSS のみのアニメーション遷移を作成する際に少し問題があります。マウスが消えると、固定幅に戻ります。

メニューがあるとしましょう：

<menu>
    <li>Item</li>
    <li>Item with long text</li>
</menu>

最初は、折りたたまれた幅 50 ピクセルの垂直バーとしてアイコンのみが表示されます。マウスオーバーすると、アイコンのラベルが表示されます。

これは、私が達成しようとしていることの簡単な例です。最初のメニューはトランジションが必要なメニューで、2 番目のメニューは、この量のコンテンツに対してどのような自動幅が必要かを示すためのものです。

問題

これは、ここで重要な役割を果たす CSS 全体の一部にすぎません。

menu {
    width: 50px;
}

menu:hover {
    width: auto; /* setting to other fixed width works as expected */
}

問題は、2 つのうちの 1 つに設定widthすると、次のようになることです。auto

  • ブラウザは固定幅 0 (Chrome) からアニメーション化します - 次に追加するmin-widthと、次のアニメーションが実行されます
  • ブラウザは何もアニメーション化せず、新しいスタイルを適用するだけです
4

1 に答える 1

3

このトリックを利用できます。max-width完全ではありませんが、数値を文字列状態に遷移させる際の問題を回避できます。

http://jsfiddle.net/Cqmuf/1/

(上記は で更新されていますfloat:left)

この方法の欠点は、メニューの最大幅を設定しなければならないことですが、とにかくこれは良いことだと思います。

マークアップ:

<div class="menu">
  <a href="#">[i] Hello</a>
  <a href="#">[i] There</a>
</div>

CSS:

div a {
  display: block;
  overflow: hidden;
  white-space: nowrap;
}

.menu {
  transition: all 2s;
  max-width: 17px;
  /*
   here you can set float:left or position:absolute
   which will force the menu to collapse to it's minimum
   width which, when expanded, will be the actual menu
   item widths and not max-width.
  */
  float: left;
}

.menu:hover {
  /*
   If you have the possibility of varied widths, i.e. multilingual
   then make sure you use a max-width that works for them all. Either
   that or do what a number of multilingual sites do and set a body
   class that states the current language, from there you can then
   tailor your max-width differently e.g. wider for German.
  */
  max-width: 300px;
}

多言語用の個別の寸法の例:

.lang-de .menu:hover { max-width: 400px; }
.lang-gb .menu:hover { max-width: 300px; }

したがって、幅を移行する代わりに、実際にmax-widthプロパティを変更します。これにより、固定値をより簡単に設定できます。これは、この制限に達したときにのみ使用され、それまでは表示されないためです。

于 2013-07-09T14:17:54.393 に答える