Hallo alle, Youtube machte mir heute [diesen Vorschlag](https://www.youtube.com/watch?v=A89FMtIkWKc), der mich darüber informierte, dass Firefox jetzt @property unterstützt. Und über ein neues bzw. kommendes CSS opt-in Feature: ~~~css :root { interpolate-size: allow-keywords; } ~~~ Zur Zeit nur in Chrome, ist aber Teil von CSS Values and Units Level 5. Zweck: endlich eine Höhe oder Breite von min-content nach max-content animieren können. <https://developer.mozilla.org/en-US/docs/Web/CSS/interpolate-size> Mit <details> habe ich es allerdings nicht geschafft, es konsistent sanft aufgleiten zu lassen. Es klappt manchmal, aber nicht immer. Seltsam. Das ist mein letzter Stand - viel Gefummel drin. ~~~css :root { interpolate-size: allow-keywords; } details div { transition: height 1s; background-color: yellow; overflow: visible hidden; } details:not([open]) div { height: 0; } details[open] div { height: max-content; } ~~~ ~~~html <details> <summary>Hello</summary> <div> World World World<br> World World World<br> World World World<br> World World World<br> World World World<br> World World World<br> </div> </details> ~~~ Wie gesagt: nur Chrome (Desktop und Android), ab v129. Und Opera in der Preview-Version. _Rolf_ -- sumpsi - posui - obstruxi

Hallo alle, Youtube machte mir heute [diesen Vorschlag](https://www.youtube.com/watch?v=A89FMtIkWKc), der mich über ein CSS opt-in Feature informierte: ~~~css :root { interpolate-size: allow-keywords; } ~~~ Zur Zeit nur in Chrome, ist aber Teil von CSS Values and Units Level 5. Zweck: endlich eine Höhe oder Breite von min-content nach max-content animieren können. <https://developer.mozilla.org/en-US/docs/Web/CSS/interpolate-size> Mit <details> habe ich es allerdings nicht geschafft, es konsistent sanft aufgleiten zu lassen. Es klappt manchmal, aber nicht immer. Seltsam. Das ist mein letzter Stand - viel Gefummel drin. ~~~css :root { interpolate-size: allow-keywords; } details div { transition: height 1s; background-color: yellow; overflow: visible hidden; } details:not([open]) div { height: 0; } details[open] div { height: max-content; } ~~~ ~~~html <details> <summary>Hello</summary> <div> World World World<br> World World World<br> World World World<br> World World World<br> World World World<br> World World World<br> </div> </details> ~~~ Wie gesagt: nur Chrome (Desktop und Android), ab v129. Und Opera in der Preview-Version. _Rolf_ -- sumpsi - posui - obstruxi