CSS Transition erweitert und reduziert Elemente durch Ändern der Höhe

Ein allgemeines Entwicklungsbedürfnis besteht darin, dass wir einen Teil eines Elements ausblenden möchten, bis es benötigt wird. Einige gängige Frameworks wie Bootstrap und JQuery bieten Übergangseffekte. CSS Transition bietet uns jedoch viel Flexibilität hinsichtlich der Übergangshöhen. Daher müssen Sie keine zusätzlichen Frameworks in Ihr Projekt einbinden.
Als Nächstes sehen wir uns an, wie man mit CSS Transition die Höheneigenschaft animiert, sowie die Probleme und Lösungen.
Sie können den Effekt in 👉 überprüfen.

Übergangshöhe

Wir möchten erreichen, dass beim Klicken auf die Schaltfläche „Mehr anzeigen“ die Höhe des Elements vergrößert wird, um den gesamten Inhalt des Artikels anzuzeigen. Beim erneuten Klicken wird es dann wieder auf seine ursprüngliche Größe verkleinert.
Wir werden hierfür eine CSS-Klasse erstellen. Diese Klasse wird dem <article>-Element mithilfe von JavaScript hinzugefügt, wenn auf die Schaltfläche „Mehr anzeigen“ geklickt wird.
Zuerst fügen wir unserer HTML-Datei ein <div>-Element hinzu und geben ihm Inhalt.

<Artikel-ID="Artikel">
  <h3>Verwenden Sie CSS Transition, um Elemente durch Ändern der Höhe zu erweitern und zu reduzieren</h3>
  <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Illo perspiciatis tempora iure accusamus rerum. Fully porro unde, laboriosam soluta accusantium numquam quos adipisci commodi velit, expedita officia cum excepturi molestias.</p>

  <P> Lorem Ipsum Dolor Sit AMETRECTETUR ADIPISICIENS ELIT. Itate Sequi cum. Nisi Ullam Voluptatum Odio Non Eum Vero Vel Dolorum Deleniti Adipisci Culpa.

  <P> Lorem Ipsum Dolor Sit AMETRECTETUR ADIPISIENS ELIT. Itate Sequi cum. Nisi Ullam Voluptatum Odio Non Eum Vero Vel Dolorum Deleniti Adipisci Culpa.

  <P> Lorem Ipsum Dolor Sit AMETRECTETUR ADIPISIENS ELIT. Itate Sequi cum. Nisi Ullam Voluptatum Odio Non Eum Vero Vel Dolorum Deleniti Adipisci Culpa.
</Artikel>
<button id="seeMoreBtn">Mehr anzeigen</button>

Die CSS-Stile sind wie folgt:

Artikel {
  maximale Breite: 800px;
  Höhe: 300px;
  Überlauf-y: versteckt;
}

/* Diese Klasse hinzufügen, wenn auf die Schaltfläche geklickt wird */
artikel.erweitert {
  Höhe: 628px;
}

Taste {
  Polsterung: .6rem;
}

Das JavaScript lautet wie folgt:

const seeMore = document.getElementById('seeMoreBtn')
const Artikel = document.getElementById('Artikel')

seeMore.addEventListener('click', () => {
  Artikel.classList.toggle('erweitert')

  const erweitert = Artikel.classList.contains('erweitert')
  if (erweitert) {
    seeMore.innerHTML = 'Inhalt ausblenden'
  } anders {
    seeMore.innerHTML = 'Mehr anzeigen'
  }
})

Fügen Sie dem Artikel CSS-Übergangseigenschaften hinzu, damit der Inhalt beim Klicken auf die Schaltfläche reibungslos nach oben und unten gleiten kann.

Artikel {
  maximale Breite: 800px;
  Höhe: 300px;
  Überlauf-y: versteckt;
  Übergang: Höhe 0,4 s linear;
}

Wenden Sie es jetzt auf Ihren Artikel an. Sie werden sehen, dass er reibungslos auf und ab gleiten kann. Das ist einfach und praktisch, aber diese Methode hat Einschränkungen. Werfen wir unten einen Blick darauf.

Limit

Diese Einschränkung besteht darin, ob die Höhe bekannt ist. Im obigen Beispiel kennen wir die Höhe des Artikels eindeutig und es funktioniert sehr gut, aber wenn wir mit dynamischen Inhalten arbeiten, kennen wir die Höhe des Elements nicht und seine Höhe kann sich auch mit der Bildschirmgröße oder auf andere Weise ändern.
Tatsächlich ist die Lösung ganz einfach. Für dynamische Inhalte sollte die Höhe des Elements auf „auto“ eingestellt werden. Auf diese Weise wird jede Vergrößerung oder Verkleinerung der Elementhöhe angepasst. Es gibt jedoch ein anderes Problem: Wenn die Höhe des Elements auf „Automatisch“ eingestellt ist, funktioniert der CSS-Übergang nicht.
Die gute Nachricht ist, dass es eine Möglichkeit gibt, dieses Problem zu beheben, ohne auf mehr JavaScript zurückgreifen zu müssen.

Lösung

Die Lösung besteht darin, die Eigenschaft „max-height“ anstelle der Eigenschaft „height“ zu konvertieren. Zuerst müssen wir die maximale Höhe schätzen, die unser Element erreichen kann. Wenn das Element dann erweitert wird, legen wir die maximale Höhe des Elements höher fest als unsere Schätzung.
Wir ändern die Height-Eigenschaft auf max-height:

Artikel {
    maximale Breite: 800px;
    maximale Höhe: 300px;
    Überlauf-y: versteckt;

    /* Erhöhen Sie die Übergangszeit zur Anpassung an die Höhe */
    Übergang: max. Höhe 0,7 s linear;
}

Artikel.erweitert {
    maximale Höhe: 1500px;
}

Auf diese Weise funktioniert die Animation und wir erzielen dennoch den gewünschten Effekt. Je nach gewünschtem Effekt muss die Übergangszeit möglicherweise angepasst werden.

Dies ist das Ende dieses Artikels zum Erweitern und Reduzieren von Elementen durch Ändern der Höhe des CSS-Übergangs. Weitere Informationen zum Erweitern und Reduzieren von Elementen mit CSS-Höhe finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den verwandten Artikeln weiter unten. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen!