© Bakual

HTML & CSS Akkordeon Probleme bei der "transition"

  • Harry
  • Autor
  • Besucher
  • Besucher
5 Jahre 11 Monate her #3750 von Harry
Hallo Leute,

ich schreiben bewusst in diesem Forum da es nichts mit dem Template zu tun hat...
Ich habe ein Akkordeon mit HTML und CSS erstellt, soweit so gut, jedoch möchte ich, dass das Ding soweit ausklappt, dass man den gesamten Text sieht und nicht mehr oder weniger...

Alles funktioniert einwandfrei wenn ich die höhe mit "em" angebe in dem Moment wenn ich zum Beispiel "100%" eintrage, wird zwas alles angezeigt wie es sollte aber die "transition" funktioniert auf einmal nicht mehr.

Link zu diesem Projekt auf Codepen

also wenn ich in der CSS ab Zeile 53, die Höhe von "7em" auf "100%" stelle wird alles richtig angezeigt jedoch ist der Übergang grausam.

Wenn jemand eine Idee hat, würde ich mich freuen.

Schöne Grüße
Harry

Bitte Anmelden oder Registrieren um der Konversation beizutreten.

Mehr
5 Jahre 11 Monate her #3751 von Thomas Hunziker
Ich würd ja gar nicht anfangen sowas selber programmieren zu wollen. Bootstrap selber hat schon eine solche Funktion welche man nutzen kann. Oder man nimmt einfach die "Slider" Erweiterung von RegularLabs.
Hab ich auch in der Dok des Templates erwähnt: bakual.net/dokumentation/typography.html#akkordeon
Folgende Benutzer bedankten sich: Harry

Bitte Anmelden oder Registrieren um der Konversation beizutreten.

  • Harry
  • Autor
  • Besucher
  • Besucher
5 Jahre 11 Monate her #3753 von Harry
Ich kenne die Bootstrap-Lösung, das ist nicht für eine Webseite, ich versuche gerade mit HTML und CSS eine "Freundschaft" rinzugehen ^^
Mir geht es hier nur um das Verständnis warum etwas so funktioniert wie es funktioniert...
Keine Sorge, ich würde das nicht auf einer Webseite einbauen ;-)
Schöne Grüße
Harry

Bitte Anmelden oder Registrieren um der Konversation beizutreten.

Mehr
5 Jahre 11 Monate her #3754 von Thomas Hunziker
Die Höhe in Prozent angeben ist immer sone Sache. Die Prozentangabe wär in Bezug auf den übergeordneten Container. Wenn diese Höhe aber nicht in absoluten Werten definiert wurde wirds lustig :)
Folgende Benutzer bedankten sich: Harry

Bitte Anmelden oder Registrieren um der Konversation beizutreten.

  • Harry
  • Autor
  • Besucher
  • Besucher
5 Jahre 11 Monate her #3755 von Harry
Hallo Thomas,
besten Dank für Deine Zeit und Mühe, habe jetzt nochmal herum experimentiert. Auch wenn ich dem übergeordneten div eine höhe von 300px gebe und dann
Code:
.akkordeon input:checked ~ p
die höhe von 100% verleihe, dann funktioniert die transition nicht und es springt auf bzw. zu.

Kann es sein, daß der Browser vorher wissen muß über welche Distanz sich die "transition" zieht, damit er die Gewschwindigkeit der tansition festlegen kann? Mir kommt vor als würde es nur mit absoluten Werten funktionieren, es der Browser so alle Daten zur berechnung hat (Dauer, Distanz, ergibt Geschwindigkeit der "transition").
Wenn dem so ist dann verstehe ich es endlich ^^

Schöne Grüße
Harry

Bitte Anmelden oder Registrieren um der Konversation beizutreten.

Mehr
5 Jahre 11 Monate her #3756 von Thomas Hunziker
Schon möglich. So gut kenn ich mich mit JavScript und CSS auch nicht aus :)
Folgende Benutzer bedankten sich: Harry

Bitte Anmelden oder Registrieren um der Konversation beizutreten.

Ladezeit der Seite: 0.182 Sekunden