details - passendes Element für content?

[Matthias Scharwies]

Servus!

Hallo Matthias,

Eben grad ausprobiert:

Ich auch. In Chrome wirkungslos. Gerade im Fuchs nachgetestet: Aha, funktioniert! 😕

Ohne JavaScript:

details p {
  overflow: hidden;}

details[open] p {
  animation: sliding 1s forwards; 
  border: thin solid;  
}

@keyframes sliding {
  0% {
    height: 0;
  }  

  100% {
    height: 200px;	
  }
}

Leider geht's nicht mit min-content; da muss ich noch schauen, wie man das hinbasteln kann.

Auch details p {animation: sliding 1s reverse; ..}geht nicht.

[EDIT]

grad im Netz gefunden: Der Inhalt von details p verschwindet sofort, aber die Höhe des details-Elements kann einen weichen Übergang kriegen:

details {  
  height: 2em;
	transition: all 0.6s;
}

details[open] {
  transition: all 0.6s;
  height: 300px;
}

Geht aber wohl nur mit festen Werten? 😟

[[/EDIT]]

Herzliche Grüße

Matthias Scharwies