Heim > Web-Frontend > CSS-Tutorial > Wie kann ich die Breite eines Elements mit „width: auto' animieren?

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

Mary-Kate Olsen
Freigeben: 2024-11-24 01:01:14
Original
406 Leute haben es durchsucht

How Can I Animate the Width of an Element with `width: auto`?

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;
}
Nach dem Login kopieren

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!

Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Neueste Artikel des Autors
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage