Wie animiere ich die Breite eines Elements mit CSS, wenn sich der Inhalt dynamisch ändert?

Animieren der Inhaltsgröße mit der automatischen CSS-Breite

Frage

Wie kann man die Breite eines Elements mit width: auto animieren, wenn sich sein Inhalt ändert? Der Inhalt ändert sich dynamisch und die Breite des Elements sollte sich mit der Animation entsprechend ändern.

Antwort

Während CSS die Animation automatischer Werte nicht direkt unterstützt, gibt es zwei Ansätze, um diesen Effekt zu erzielen:

1. Trick mit maximaler Breite/maximaler Höhe

• Geben Sie dem Element eine feste maximale Breite oder maximale Höhe, die groß genug ist, um den größtmöglichen Inhalt aufzunehmen.
• Für Beispiel:

.myspan {
  display: inline-block;
  font-size: 30px;
  background-color: #ddd;
  max-width: 500px; /* Set a sufficiently large max-width */
}

2. Skriptbasierte Breiteneinstellung

• Verwenden Sie JavaScript oder eine andere Skriptsprache, um die Breite des Elements dynamisch festzulegen, wenn sich der Inhalt ändert.
• Dieser Ansatz bietet eine genauere Kontrolle über die Breitenänderungen .
• Zum Beispiel (mit jQuery):

$(document).ready(function() {
  $(".myspan").hover(function() {
    $(this).width($(this).find("span").outerWidth());
  }, function() {
    $(this).width("auto");
  });
});

Beispiel mit Hover-Effekt

Mit dem Trick „max-width/max-height“ können wir ein einfaches Beispiel erstellen, bei dem die Breite des Elements beim Hover animiert wird:

.myspan {
  display: inline-block;
  font-size: 30px;
  background-color: #ddd;
  vertical-align: bottom;
}

.myspan::after {
  content: " <pre class="brush:php;toolbar:false"><link href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css" rel="stylesheet" />

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

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

Das obige ist der detaillierte Inhalt vonWie animiere ich die Breite eines Elements mit CSS, wenn sich der Inhalt dynamisch ändert?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!