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

自動幅によるアニメーション要素のサイズ変更

質問:

幅をアニメーション化する方法コンテンツとして width: auto を持つ要素変更点?

回答:

width: auto を使用した要素の直接の幅のアニメーション化は、現在 CSS ではサポートされていません。ただし、次のような代替方法を利用することもできます。

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

• 最も広い可能性のあるコンテンツに対応できるように、十分な大きさの最大幅/最大高さを割り当てます。
• 表示: インラインを使用します。 -コンテンツの変更時にサイズ変更を有効にする要素のブロック。

コードスニペット

.myspan {
  display: inline-block;
  font-size: 30px;
  background-color: #ddd;
  vertical-align: bottom;
  max-width: 500px;  // Adjust as necessary
}

.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;
}

2. JavaScript 操作:

• JavaScript を使用して、コンテンツの長さに基づいて幅プロパティを動的に設定します。

注: このメソッドには追加のプロパティが必要です。コードを使用するため、最初のアプローチほど効率的ではない可能性があります。

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