3 ms·
https://m8y.org/tmp/testcase490.xhtml https://m8y.org/tmp/testcase490.xhtml Animation.
by capitainenemo 6y ago
https://m8y.org/tmp/testcase490.xhtml https://m8y.org/tmp/testcase490.xhtml
Animation.
- extra88 6y agoThanks, I was just going by the note on the MDN page. I tried changing your example to have the transition be on the <detail> element itself instead of the child <p> but it didn't work, maybe that's what the MDN note is about.
- capitainenemo 6y agohttps://m8y.org/tmp/testcase491.xhtml https://m8y.org/tmp/testcase491.xhtml transition on <detail> And, yeah, the main "trick" is that it's tough to animate a height when the content is variable height. Thus the max-height and tweaked animation curve trick. But for many cases you'd probably want fixed height with scroll anyway. Just be sure to use a keyframe to turn off the scroll when animating or it looks awful.