web-dev-qa-db-ja.com

CSSトランジションの自動幅

内容が変化したときに幅をアニメーション化したい要素があります。 width: auto、これは変更されません。 このトリック を見ましたが、それは2つの値の間を移行するためのもので、1つが設定されています。値だけを操作するのではなく、コンテンツのみを操作します。アニメーションで要素のサイズを変更したいのです。これはCSSではまったく可能ですか？

ここに私のコードの簡略版があります：

.myspan {
  background-color: #ddd;
}

.myspan:hover::after {
  content: "\00a0\f12a";
  font-family: Ionicons;
  font-size: 80%;
}
<link href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css" rel="stylesheet"/>
<html>
  <body>
    <span class="myspan">Hello!</span>
  </body>
</html>

ユーザーが要素にカーソルを合わせたときに、サイズを変更してアニメートしたいと思います。

csscss3animationcss-transitionscss-animations
13
Luke Taylor

私がコメントしたように、auto（まだ）をアニメーション化することはできないので、max-width/max-heightトリック、または、より正確にする必要がある場合は、スクリプトを使用して幅を設定します。

とともに 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: max-width .6s;
  vertical-align: bottom;
  overflow: hidden;
}
.myspan:hover::after {
  max-width: 80px;
  transition: max-width 1s;
}
<link href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css" rel="stylesheet" />

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