コンテンツが動的に変化するときに CSS を使用して要素の幅をアニメーション化する方法

CSS Auto width を使用してコンテンツ サイズをアニメーション化する

質問

コンテンツが変更されたときに、width: auto を使用して要素の幅をアニメーション化するにはどうすればよいですか?コンテンツは動的に変化し、アニメーションに応じて要素の幅も変化する必要があります。

回答

CSS は自動値のアニメーション化を直接サポートしていませんが、この効果を実現するには 2 つのアプローチがあります。

1.最大幅/最大高さのトリック

• 要素に、可能な限り広いコンテンツを収容できる十分な大きさの固定最大幅または最大高さを与えます。
• の場合例:

.myspan {
  display: inline-block;
  font-size: 30px;
  background-color: #ddd;
  max-width: 500px; /* Set a sufficiently large max-width */
}

2.スクリプトベースの幅設定

• JavaScript または別のスクリプト言語を使用して、コンテンツが変更されたときに要素の幅を動的に設定します。
• このアプローチにより、幅の変更をより正確に制御できます。 .
• 例 (使用jQuery):

$(document).ready(function() {
  $(".myspan").hover(function() {
    $(this).width($(this).find("span").outerWidth());
  }, function() {
    $(this).width("auto");
  });
});

ホバー効果を使用した例

max-width/max-height トリックを使用して、ホバー時に要素の幅がアニメーションする簡単な例を作成できます。

.myspan {
  display: inline-block;
  font-size: 30px;
  background-color: #ddd;
  vertical-align: bottom;
}

.myspan::after {
  content: " <pre class="brush:php;toolbar:false"><link href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css" rel="stylesheet" />

<span class="myspan">Hello!</span>

a0\f12a "; font-family: ionicons; font-size: 80%; display: inline-block; max-width: 0; transition: max-width .6s; vertical-align: bottom; overflow: hidden; } .myspan:hover::after { max-width: 80px; transition: max-width 1s; }

以上がコンテンツが動的に変化するときに CSS を使用して要素の幅をアニメーション化する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。