Kann ich die Breite eines Elements animieren, wenn ich „width: auto' in CSS verwende?

So animieren Sie die Breite von Inhalten mit Auto

In CSS kann die Eigenschaft „Breite“ auf „Auto“ gesetzt werden, um die Anpassung eines Elements an die Größe zu erzwingen sein Inhalt. Dieser Wert kann jedoch normalerweise nicht animiert werden. Infolgedessen ändert sich die Breite eines Elements nicht reibungslos, wenn sich sein Inhalt ändert, was optisch störend sein kann.

Ist es möglich, die Breite eines Elements mit width: auto zu animieren?

Leider ist es nicht möglich, die width-Eigenschaft eines Elements, das auf „auto“ gesetzt ist, direkt zu animieren. Das Besondere am Wert auto ist, dass er das Element dazu zwingt, nur so viel Platz einzunehmen, wie für seinen Inhalt erforderlich ist. Das Animieren dieses Werts würde eine Änderung des Inhalts des Elements erfordern, was wir normalerweise nicht tun möchten.

Alternative Lösung mit max-width

Anstatt die Eigenschaft width zu animieren selbst können wir die Eigenschaft max-width zusammen mit einem Übergang auf max-width verwenden, um die Illusion einer Animation der Breite zu erzeugen. Indem wir eine maximale Breite festlegen, die größer als die tatsächliche Breite des Elements ist, können wir erzwingen, dass das Element innerhalb dieser maximalen Breite passt. Wenn sich der Inhalt des Elements ändert und breiter wird, ermöglicht die maximale Breite dem Element, sich auf seine neue maximale Größe zu erweitern, wodurch das Erscheinungsbild einer animierten Breite entsteht.

Beispielcode:

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

In diesem Beispiel ist für das .myspan-Element die Eigenschaft „max-width“ auf 0 gesetzt. Wenn der Benutzer mit der Maus über das Element fährt, wird das Die Eigenschaft „max-width“ wird in 80 Pixel geändert, wodurch das Element gezwungen wird, auf diese Breite zu wachsen. Die Eigenschaft „Übergang“ stellt sicher, dass die Breitenänderung animiert wird, wodurch der Eindruck einer animierten Breite entsteht.

Das obige ist der detaillierte Inhalt vonKann ich die Breite eines Elements animieren, wenn ich „width: auto' in CSS verwende?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!