Hacker News Reader

Comment by XCSme | Hacker News Reader

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.).

View on HN

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.

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 :)

Reply on news.ycombinator.com