mootools FX.slideOut collapses table row

Question

I'm borrowing some code from a David Walsh tutorial on animated delete with mootools.

When I use the Mootools FX.slide on a table row, it sort of collapses the row horizontally before sliding it up, which is not the desired effect.

There's a fiddle here if you'd like to take a look-- http://jsfiddle.net/gNvvT/

How can I make this effect a smooth slide vertically, rather than collapsing left, then up?

Thanks!

Answer 1

I'm afraid Fx.Slide can't work with table rows, but only with block elements.
As Dimitar Christoff said to you.

I've modified your fiddle to get around this problem. From the code you posted, it seems you are quite practical with Mootools, so I just wrote some comments on the code. I'm sure you will get the trick.

http://jsfiddle.net/gNvvT/5/

Let me know if it works on your real world application!

Edit. There was some useless code I left from previous tests. I removed it and I updated the fiddle URL.

Answer 2

this is because TR are not real block style elements, it's display: table-row (iirc).

The Fx.Slide class actually has just 2 tricks it tries to employ to make it appear like it's dissolving, basically:

1. set overflow from visible to hidden, which - in the context of a TR, makes no sense.
2. (optional) it can wrap an element in a wrapper and then collapse that, but once again, the wrapper becomes the direct parent of the element and it's a div, which you cannot do in a table.

it then allows it to manipulate the height of the element and make it smaller etc.

the jump happens as it changes the display/overflow and it all goes funny after as it collapses the table.

you should consider an alternative way, like fade and when available, scale transform.