6 ms·
CSS animation is a fairly general concept but it is limited in some cases such as this by the fact that the renderer and spec have certain constraints that don’
by memco 8y ago
CSS animation is a fairly general concept but it is limited in some cases such as this by the fact that the renderer and spec have certain constraints that don’t play nice for the animation system. More specifically an animation might increment an integer by .01 until reaching the next one but the spec does not allow for fractional valise for that property so even though the value is changing the appearance is not. When the increment reaches a valid value the property will simply jump to the new value without showing any intermediate state. Grid I think is a particularly tricky spot for some of these properties because of such behavior.
To address some of the comments about use cases: we have a grid of items we want to filter based on a user’s search query. It is easy to animate the items disappearing but not easy to shift the remaining items into their new positions because the grid properties don’t let you animate that way. If I have an item in row 2 column 3 there’s not an easy way to transition it to row 1 column 1 at present. If you change the row and column values in this way it will jump from column to column row to row, not move from 125px,80px to 0px,0px along a sloped path.
- jonahx 8y agoA well tested (js) library that does such animated filtering well is: https://isotope.metafizzy.co/ https://isotope.metafizzy.co/
- phkahler 8y agoThanks for the informative response. >> To address some of the comments about use cases: we have a grid of items we want to filter based on a user’s search query. Isn't that what XSLT is good for to some extent? I guess nobody seems to use it but it can do things like treat selected items differently. Using animation features to hide rows in a grid feels like the wrong solution to me.