CSSトランジション自動幅

内容が変化したときに幅をアニメーション化したい要素があります。それはwidth: autoであり、これは決して変更されません。私はthis trickを見たことがありますが、それは2つの値の間で遷移するためのもので、1つは設定されています。値を操作するのではなく、コンテンツだけを操作しています。要素のサイズをアニメーションで変更したいと思います。これはCSSでも可能ですか？私は、ユーザーが要素の上に置いたときにアニメーション化する変化の大きさを希望CSSトランジション自動幅

.myspan { 
 
    background-color: #ddd; 
 
} 
 

 
.myspan:hover::after { 
 
    content: "\00a0\f12a"; 
 
    font-family: Ionicons; 
 
    font-size: 80%; 
 
}

<link href="http://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css" rel="stylesheet"/> 
 
<html> 
 
    <body> 
 
    <span class="myspan">Hello!</span> 
 
    </body> 
 
</html>

：ここ

は、私のコードの簡易版です。

出典

2016-07-28 Luke Taylor

あなただけのCSSと 'auto'をアニメーション化することはできません。リンクした「最大高さ」のトリックを使用するか、ページの読み込み時に最終的な高さを設定する小さなスクリプトを実行する – LGSon

@ LGSonこの場合、どのように最大幅のトリックを使用しますか？可変ですか？ –

さらに、「内容が変わったとき」とはどういう意味ですか...なぜ彼らはそれをしますか？あなたがそれをするためにJSを使用しているならば、JSを使って幅の変更を自動化してください。 –

私がコメントしたように、 "max-width"/"max-height"トリックを使用してください。

最大値に対応できる大きさの値を指定します。

.myspan { 
 
    display: inline-block; 
 
    font-size: 30px; 
 
    background-color: #ddd; 
 
    vertical-align: bottom; 
 
} 
 
.myspan::after { 
 
    content: " \00a0\f12a "; 
 
    font-family: ionicons; 
 
    font-size: 80%; 
 
    display: inline-block; 
 
    max-width: 0; 
 
    transition: all 1s; 
 
    vertical-align: bottom; 
 
    overflow: hidden; 
 
} 
 
.myspan:hover::after { 
 
    max-width: 80px; 
 
    transition: all 1s; 
 
}

<link href="http://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css" rel="stylesheet" /> 
 

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

出典

2016-07-28 18:12:22 LGSon

右、それを擬似要素で行います。 –

@LukeTaylor閉じるアイコンの幅があらかじめ定義されている場合は、代わりに幅を使用して、擬似に最後の幅のアイコンを含めることができます – LGSon

申し訳ありませんが、私はあなたがそれを主な要素に置くことを提案していると思っていました。もう少し助けてもらえますか？ 'overflow：hidden'と' display：inline-block'を組み合わせると、イオニコンが消えます。 –

CSSトランジション自動幅

答えて

関連する問題