Hacker News Reader

Comment by dmitriid | Hacker News Reader

My favourite example is, of course, animating height: auto and width: auto. A detailed discussion on why it's not possible and the (rather insane) tricks you have to do to animate these two properties is here: https://css-tricks.com/using-css-transitions-auto-dimensions...

View on HN

You should only animate GPU-accelerated properties (transform, opacity) if you care about performance and responsiveness, or in the worst case some properties that trigger paint (color, backgroundColor, etc.).

That's what I (sort of) learned the hard way :) So most useful animations like the collapsing list item in the article are nigh impossible in CSS.

That's true, there are some limitations. Sometimes you can still do those sort of things in CSS if you set the target values using JS (instead of changing height to 0, change scaleY to 0 and translate up the elements from below with the height of the element that was removed). If all elements are same height, or the height is known beforehand you can just hardcode that translate value into the animations.

> instead of changing height to 0, change scaleY to 0 and translate up the elements from below with the height of the element that was removed

This will leave a gap below the elements

> If all elements are same height, or the height is known beforehand you can just hardcode that translate value into the animations.

The problem is that there's rarely if ever a case when you know the height of all elements on a page :(

> This will leave a gap below the elements.

Recursively apply same logic to rest of page!

Ah! Didn’t think about that :)

It's great until you discover things like position-fixed doesn't work when there's an ancestor with a transform.

https://bugs.chromium.org/p/chromium/issues/detail?id=20574

It's really fun because even a will-change: transform will trigger it.

Reply on news.ycombinator.com