「width: auto」を使用して CSS 要素の幅をアニメーション化するにはどうすればよいですか?

width: auto を使用したコンテンツの幅のアニメーション化

CSS における一般的な課題の 1 つは、コンテンツが変更されたときに要素の幅をアニメーション化することです。これは、要素に width: auto が設定されている場合、特に、明示的な幅の指定ができない場合に注意が必要です。

従来の解決策は、transition プロパティを使用して、2 つの特定の幅値の間でアニメーションを作成することです。ただし、このアプローチは、要素が遷移できる幅の値を手動で設定する必要があるため、長さが異なるコンテンツにはうまく機能しません。

コメント投稿者が述べたように、現時点では直接アニメーション化することはできません。 width: auto プロパティ。回避策の 1 つは、max-width プロパティと max-height プロパティを利用することです。コンテンツの最大幅を十分に大きくすることで、展開した場合でもコンテンツが常に収まるようにすることができます。

「最大幅」トリックの例を次に示します。

.myspan {
  display: inline-block;
  font-size: 30px;
  background-color: #ddd;
  vertical-align: bottom;
}
.myspan::after {
  content: " 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;
}

ここでは、要素の上にマウスを置いたときに「フラッシュ」アニメーションを実装します。コンテンツは 30 ピクセルに固定されたままですが、アイコンは最大幅のアニメーションを使用してスムーズにスライドします。

より高い精度が必要な場合は、JavaScript ソリューションを使用できます。これには、コンテンツの長さに基づいて要素の幅を動的に設定することが含まれます。このアプローチではより詳細な制御が可能ですが、JavaScript の実装がさらに複雑になります。

要約すると、width: auto を直接アニメーション化することはまだ不可能ですが、「max-width」トリックや JavaScript スクリプトなどの回避策を使用すれば可能です。目的の効果を達成するために使用してください。

以上が「width: auto」を使用して CSS 要素の幅をアニメーション化するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。