#mecomplaining

In the UX world, I’m kindof an old timer. I remember when we did it all with jQuery and called it AJAX, even though AJAX has nothing to do with DOM manipulation or animations. Our dropdown menus would slideUp and slideDown like the tongues of helpful iguanas, and we’d spend hours slicing pngs to to make rounded corners in all the colors of the blueish rainbow.

Now I’m happy to write a few lines of CSS and leave JavaScript with the logic. I still use jQuery (mostly out of habit) but only invoke 10% of its methods. Things like slideUp and hide are easily accomplished with CSS analogues and with far less code.

But what about fadeIn and fadeOut, two of the most useful animations on a designer’s tool belt? I wrote it the other day, and it seemed easy enough.

.item { transition: opacity 0.2s; } .item.hide { display: none; opacity: 0; }

It's so simple. Add the hide class, and the item fades out – except it doesn't. Changing the display style of an element makes it skip any relevant transitions causing the opacity change to be immediate (and pointless). Turns out we have to do hack together a bunch of extra styles to get the desired effect, and the result isn't a good read.

.item { transition: opacity 0.2s, height 0; } .item.hide { opacity: 0; height: 0; overflow: hidden; transition: opacity 0.2s, height 0 0.2s; }

The explanation for why the rendering engine requires this is a fine one, and I won't go into it here. Others have. But I will point out how obtuse it is to make an extremely common effect, one that is easily accomplished with a single jQuery function call $('.item').fadeOut(), so difficult in a version of CSS that can otherwise recalculate measurements and even animate sprites with ease.