Wie kann ich die Breite eines Elements mit „width: auto' animieren?

Größenänderung animierter Elemente mit automatischer Breite

Frage:

So animieren Sie die Breite von ein Element mit width: auto als Inhalt Änderungen?

Antwort:

Das Animieren der direkten Breite eines Elements mit width: auto wird derzeit in CSS nicht unterstützt. Sie können jedoch alternative Methoden nutzen:

1. Trick mit maximaler Breite/maximaler Höhe:

• Weisen Sie eine ausreichend große maximale Breite/maximale Höhe zu, um den größtmöglichen potenziellen Inhalt unterzubringen.
• Verwenden Sie display: inline -Block für das Element, um die Größenanpassung bei Inhaltsänderungen zu aktivieren.

Code Snippet

.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-Manipulation:

• Verwenden Sie JavaScript, um die Breiteneigenschaft basierend auf der Länge des Inhalts dynamisch festzulegen.

Hinweis: Diese Methode erfordert zusätzliche Code und ist möglicherweise nicht so effizient wie der erste Ansatz.

Das obige ist der detaillierte Inhalt vonWie kann ich die Breite eines Elements mit „width: auto' animieren?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!