preact-transitioning icon indicating copy to clipboard operation
preact-transitioning copied to clipboard

width/height transitions

Open mindplay-dk opened this issue 5 years ago • 0 comments

Finally, a lightweight implementation of transition-groups. Nice! :smiley:

I'm particularly interested in transitions to indicate adding/removing items, and have always thought the best way to indicate this was simply to have items smoothly expand or collapse, usually vertically.

Fading in/out is a good start, but it tends to make the whole interface "jump" - and making items expand/collapse with just CSS isn't really practical. (I know of the technique where you transition between 0 and a very high max-height, but this results in a perceptible delay before the transition starts, which can make an app feel sluggish.)

What do you think about incorporating height (and maybe width) transitions?

Here's a source showing how simply this can be implemented:

https://github.com/kasvtv/transition-height/blob/master/index.js

mindplay-dk avatar Feb 25 '20 07:02 mindplay-dk